Color Studio Runs on your device ← All tools

Color Studio

Make colorswork magic.

Five tools to convert, mix, explore and perfect colors — right in your browser. No installs. No signups. Just beautiful colors.

Your games

Convert & harmonize 15 color spaces plus harmonies. Open tool Recolor a photo Try colors on rooms and screenshots. Open tool Gradient generator Build CSS gradients and copy them. Open tool Color mixer Mix colors and build scales. Open tool Readable pairs Let the browser pick readable text. Open tool
Not sure where to start? Let the randomizer pick a tool for you. Surprise me

Convert and explore colors across CSS color spaces

Spectral converts colors between CSS color spaces — HEX, RGB, HSL, OKLCH and more — and helps you build harmonies and check how colors appear under color-vision deficiencies.

  1. Enter a color in any format, or pick one visually.
  2. Read the equivalent values in every supported color space, ready to copy.
  3. Generate harmonies (complementary, analogous and others) built in the perceptual OKLCH space.
  4. Use the color-blindness simulation to confirm your palette stays distinguishable.
  5. Copy any value straight into your stylesheet.

Tip: OKLCH keeps perceived lightness consistent when you rotate hue — ideal for building accessible palettes.

Experiment with palettes and gradients

A sandbox for playing with colors: build palettes, blend gradients, and preview combinations before committing them to a design.

  1. Start from a base color or a randomized palette.
  2. Adjust individual swatches until the set feels right together.
  3. Preview the palette applied to sample UI elements and gradients.
  4. Copy the color values or export the palette for your project.

Tip: Check contrast between text and background swatches early — it is the constraint that kills otherwise pretty palettes.

Build a CSS gradient or a pattern

Design a gradient visually and copy the CSS, including a plain sRGB fallback for browsers that do not understand modern color spaces.

A gradient

  1. Pick linear, radial or conic, then set the angle or the center point.
  2. Click the track to add a color stop, drag a handle to move it, double-click it to remove it.
  3. Choose the blending space. Oklab and OKLCH avoid the gray middle that sRGB produces between opposite colors.
  4. Copy the CSS. The fallback line appears automatically whenever you use a space older browsers cannot read.

A repeating pattern

Patterns are not a separate feature: they are ordinary gradients using three tricks together.

  1. Hard edges. Tick “Hard edges between stops” and each color stops dead where the next begins instead of fading. Two stops become a stripe rather than a blend — this single switch is what separates a pattern from a gradient.
  2. A tile size. Give the layer a tile width and height. The gradient then repeats at that size across the box instead of stretching once from edge to edge. Leave either at zero and the layer fills the whole area.
  3. Layers. Press Add to stack another gradient. The first layer sits on top, and lower layers show through wherever the ones above are transparent — so a shape drawn in one layer needs a solid color beneath it to sit on. Use Bring forward and Send back to reorder, and the numbered buttons to choose which layer the controls below are editing.

Two worked examples. Dots: one radial layer, circle, closest side, hard edges, the second stop set to fully transparent at about 42%, tiled at 44 by 44 — then a plain color layer underneath. Checks: one conic layer with four hard stops at 0, 25, 50 and 75 per cent alternating between a color and transparent, tiled square, over a plain layer.

The nine entries in “Start from a pattern” build exactly these stacks for you. Load one, then take it apart: change a color, halve the tile size, add a third layer. Nothing is locked.

Tip: Already have a pattern? Paste the whole background-image declaration into the import box — each comma-separated gradient becomes its own editable layer.

Mix colors and build a scale

Mixing in a perceptual space such as Oklab keeps the middle of a blend as bright as its ends. Mixing in sRGB, which is what most tools do, dips through a muddy center.

  1. Pick two colors. The large swatch shows the mix and its resolved value.
  2. Move the balance slider to favor one side. 50% is an even mix.
  3. Choose the mixing space. Oklab is the safe default for two arbitrary colors; OKLCH travels around the hue wheel instead of through gray.
  4. Set how many steps you want and a full scale appears. Click any swatch to copy that one color.
  5. Copy the scale as fixed values for anywhere, or as color-mix() expressions that stay live if you later change a variable.

Tip: Use Tints, Shades and Tones to build a palette from a single brand color — mixing toward white, black and gray respectively.

Find a readable pair of colors

Three ways in, depending on what you already know. Each one ends with colors you can use, not just a verdict.

  1. Start from a background. You know the panel color and need text for it. You get the browser's pick plus four alternatives that all pass.
  2. Start from text. You know the type color and need something to put behind it.
  3. Check a pair. You have both and want to know if they work. Where they do not, you get two sets of fixes: keep the text and move the background, or the other way round.

Type or paste a color in any of thirteen spaces, and set how values are written back to you. Nothing is uploaded; everything is worked out on your own machine.