Is OKLCH safe to use in production CSS?

Modern browsers support oklch() and it interpolates better than sRGB in gradients. Keep a hex fallback for older engines; the converter gives you both forms of any color.

What is the fastest way to get a palette into Tailwind?

Generate or paste a palette in the generator, then choose the Tailwind v4 export: it emits an @theme block with OKLCH values and the color names as comments.

Can I check contrast without leaving the terminal mindset?

The contrast checker takes two codes and gives the ratio plus pass and fail at each WCAG level, and the fixer returns the nearest passing alternative so you can commit a working value immediately.

How do I convert hex to RGB in CSS?

You usually do not need to: hex IS an RGB notation, and modern CSS accepts either everywhere. When a library wants separate channels, the converter shows the rgb() triplet for any hex, along with HSL, CMYK, and OKLCH.

What is the difference between #FFF and #FFFFFF?

Nothing: three-digit hex doubles each digit, so #FFF expands to #FFFFFF and #f80 to #ff8800. Eight digits add an alpha pair at the end.

How should I store colors in a design-token file?

One canonical value per color (OKLCH if your pipeline supports it, hex otherwise), one semantic name per role, and generated aliases for states. The generator's JSON export is shaped for exactly this.

For web developers

Color for web development

Developers meet color as strings in code: a hex from a design file, an rgb() in legacy CSS, an OKLCH in a modern token file. Everything here goes string to string fast: paste any code, get every other format, fix the contrast, and leave with CSS you can commit.

Starting points

Three starter palettes, generated live

Each set is produced by the palette engine, not picked from a mood board. Open one in the generator to lock what fits and reroll the rest.

System defaults, done right

Because a balanced set for prototyping when no brand exists yet.

Azure Dragon #003A80 Gorgonzola Blue #474FC4 Matt Purple #8D6DE9 Crash Pink #CF8BFF Distilled Rose #FFBEFD

System defaults, done right Open in generator Preview Recolor

Docs and dashboards

Because cool hues read as calm chrome around content.

Iron Blue #004A9A God of Rain #4160C4 Hera Blue #7378E4 Cobalite #A491FF Violet Heaven #CEB5FF

Docs and dashboards Open in generator Preview Recolor

High-energy landing

Because saturated hues for marketing surfaces, with contrast checked before shipping.

Tijolo #AC5700 Golden Brown #B57D00 Nuclear Fallout #A89400 Grasping Grass #93B500 Dasyphyllous Green #00DD3C

High-energy landing Open in generator Preview Recolor

The shelf

Working colors of the field

The named colors web developers reach for, each resolved against the 31,912-name registry. Tap a swatch to copy the hex; open the name for the full page with codes, palettes, and contrast data.

Rebecca Purple #663399 #663399, the CSS keyword with a story; a dignified default purple
Tomato #EF4026 the CSS keyword that survives as a genuinely usable alert red
Dodger Blue #3E82FC the classic link-and-action blue; check it against visited state
Gainsboro #DCDCDC the CSS light gray most border utilities quietly resolve to
Midnight Blue #020035 a deep header or code-block background that is not plain black
Turquoise #06C2AC a hover or focus accent that separates from action blue
Firebrick #B22222 an error red that stays readable as text on white
Gold #FFD700 star ratings and highlight badges; too low-contrast for body text
Indigo #4B0082 the dark-mode accent that keeps its identity at low luminance
Salmon #FF796C a warm badge or tag fill that white and dark text both survive
Ghost White #F8F8FF the page background that keeps pure-white cards visible on top

Speak the language

Terms this field runs on

Hex code

?

Hex code
A six-digit base-16 way of writing an RGB color, like #FF6B35. Two digits each for red, green, and blue. It is the most common notation in web and design tools.Full glossary entry →

Two base-16 digits per channel. #RGB shorthand doubles each digit; #RRGGBBAA carries alpha. Full definition →
OKLCH

?

OKLCH
A modern, perceptually uniform color space with three axes: lightness, chroma, and hue. Equal steps in OKLCH look equal to the eye, which makes it the best space for generating shade scales and harmonies.Full glossary entry →

oklch() in CSS interpolates without the gray dead zone sRGB gradients fall into. Full definition →
sRGB

?

sRGB
The default color space of the web and most screens. If a color is described without a space, it is almost always sRGB.Full glossary entry →

The web's default space. An unlabeled hex is an sRGB value; treat conversions accordingly. Full definition →
Display P3

?

Display P3
A wider color space than sRGB, used by modern phones and laptops. It can show more saturated reds and greens that sRGB clips.Full glossary entry →

color(display-p3 …) unlocks reds and greens sRGB clips, with a fallback for older screens. Full definition →
Alpha channel

?

Alpha channel
The transparency value attached to a color. An alpha of 1 is fully opaque; 0 is invisible. Hex can carry it as a fourth pair of digits.Full glossary entry →

The fourth channel. rgb(0 0 0 / 0.6) and 8-digit hex are the same statement in two dialects. Full definition →

The workflow

How web developers use this site

1 Paste any color code The converter takes hex, rgb, hsl, hsv, cmyk, or oklch and returns all of them, plus the color's name and page. Color converter →
2 Resolve any hex to a page Every one of the 16,777,216 hex values has a page with codes, palettes, and contrast data. Deep-link them in code reviews. Hex lookup →
3 Fix failing contrast in place Give it a failing pair and it returns the nearest passing color that keeps the hue, with WCAG 2.x and draft APCA numbers. WCAG color fixer →
4 Export as code CSS custom properties, Tailwind v4 @theme, SCSS, or JSON tokens, one click each from the generator. Palette generator →

Field notes

What goes wrong, and the fix

Gradients through sRGB gray A blue-to-yellow gradient interpolated in sRGB sags through muddy gray at the midpoint. Interpolate in OKLCH, or pick midstops from the gradient tool, which already does. Gradient generator →
Hardcoding one-off hexes Every raw hex in a component is a future inconsistency. Name it, tokenize it, and let the generator emit the variable block so the value lives once. Token exports →
Trusting eyeballed contrast Screens, night mode, and ambient light all lie. The ratio is arithmetic on the two values, and the fixer returns the nearest passing color when arithmetic says no. WCAG fixer →

FAQ

Common questions

Is OKLCH safe to use in production CSS?: Modern browsers support oklch() and it interpolates better than sRGB in gradients. Keep a hex fallback for older engines; the converter gives you both forms of any color.
What is the fastest way to get a palette into Tailwind?: Generate or paste a palette in the generator, then choose the Tailwind v4 export: it emits an @theme block with OKLCH values and the color names as comments.
Can I check contrast without leaving the terminal mindset?: The contrast checker takes two codes and gives the ratio plus pass and fail at each WCAG level, and the fixer returns the nearest passing alternative so you can commit a working value immediately.
How do I convert hex to RGB in CSS?: You usually do not need to: hex IS an RGB notation, and modern CSS accepts either everywhere. When a library wants separate channels, the converter shows the rgb() triplet for any hex, along with HSL, CMYK, and OKLCH.
What is the difference between #FFF and #FFFFFF?: Nothing: three-digit hex doubles each digit, so #FFF expands to #FFFFFF and #f80 to #ff8800. Eight digits add an alpha pair at the end.
How should I store colors in a design-token file?: One canonical value per color (OKLCH if your pipeline supports it, hex otherwise), one semantic name per role, and generated aliases for states. The generator's JSON export is shaped for exactly this.

Other work