Tools

Color

Pick a color and copy it in any color space or format.

OKLCh

C →  ↑ L  ·  ring is H

Peaks at C 0.232 · L 0.58

Empty stretches are values this gamut can't reach at the current C and H.

Empty stretches are values this gamut can't reach at the current L and H.

Empty stretches are values this gamut can't reach at the current L and C.

Alpha

Analysis

WCAG 2 contrast. Change either counterpart to test your own colors.

As the background

Aa The quick brown fox

3.37:1

AAAAAAA large
Text
Aa The quick brown fox

6.23:1

AAAAAAA large
Text

As the text

Aa The quick brown fox

3.37:1

AAAAAAA large
Background
Aa The quick brown fox

6.23:1

AAAAAAA large
Background

Color vision

Simulated at full severity, so this is a worst case rather than any one person’s view.

As shown

Protanopia

Deuteranopia

Tritanopia

Palette

Steps are spaced so they look even. Click a swatch to copy its hex.

Harmonies

Analogous

Neighbours 30° either side on the wheel. Calm and cohesive.

Complementary

The opposite hue. The strongest contrast of hue there is.

Split complementary

The two hues either side of the complement. Contrast with less tension.

Triadic

Three hues 120° apart. Balanced and colorful.

Tetradic

Two complementary pairs in a rectangle. Rich, and best led by one color.

Square

Four hues 90° apart. The most varied of the set.

Variations

Shades

Toward black. Darker and deeper.

Tints

Toward white. Lighter and softer.

Tones

Toward the gray of the same lightness. Quieter and more muted.

Hues

The same lightness and chroma, 50° either side.

Marked swatches had their chroma reduced to fit sRGB.

Readouts

Click a value to copy it. Click a name to pick in that space.

RGB working spaces

9
  • Hex
  • DCI
  • D50

Cylindrical

5

Perceptual

8
  • D50
  • D50

Device-independent

3
  • D50

Film / VFX

4
  • ACES
  • ACES
  • ACES
  • ACES

Mobile

7
  • Android hex
  • Android int
  • Compose
  • Color.argb()
  • UIColor
  • SwiftUI
  • SwiftUI (P3)

Code & tokens

7
  • GLSL (sRGB)
  • GLSL (linear)
  • Figma / plugin
  • LaTeX xcolor
  • LaTeX rgb
  • Tailwind
  • Design token (DTCG)

Names

CSS / X11

CSS Color spec

Loading name sets…

xkcd survey

CC0

Loading name sets…

Munsell

NBS 1967, public domain

Loading name sets…