COLOR
Color & Palette
Convert a color between every format, build harmonies and a 50–950 shade scale in OKLCH, check contrast, and export the result as Tailwind or plain CSS. Everything runs in your browser.
Pull a palette out of an image
Drop in a photo, a screenshot or a logo. Click any color it finds to make it the color above — the file stays in your browser.
Current color
#7C5CFC
Violet
Palettes
Click a swatch to copy its hex, or open its menu for any other format.
Complementary
Opposite hues. The strongest possible pairing, and the easiest to overuse — good for one accent against a dominant color.
Triadic
Three hues at equal spacing. Vivid but balanced; usually works best with one dominant and two supporting.
Analogous
Neighboring hues. Quiet and cohesive, with no natural focal point, so it needs contrast from lightness instead.
Split Complementary
The complement, split in two. Most of the tension of a complementary pair with less of the vibration.
Tetradic
Two complementary pairs. The richest set here and the hardest to balance — let one hue lead.
Monochrome
One hue at five lightness steps. Reliable for interface surfaces, where hue variety is noise.
Light & Dark Shades
A 50–950 scale with lightness fixed per step in OKLCH and chroma peaking mid-ramp. Your color sits at 500, the step its own lightness matches — not forced to 500.
Accessibility
Text on your color as the background, scored as a contrast ratio against the WCAG levels . The third card takes any color, because a mid-tone on a mid-tone is the pairing the other two can't answer.
The quick brown fox
jumps over the lazy dog, twice, in poor light.
APCA Lc -75.3 — Content text
The quick brown fox
jumps over the lazy dog, twice, in poor light.
APCA Lc 34.3 — Non-text and disabled
The quick brown fox
jumps over the lazy dog, twice, in poor light.
APCA Lc 0.0 — Not legible
Every card also reports an APCA Lc figure. It is a WCAG 3 draft, offered as a second opinion and never as a pass or a fail.
Gradient
Interpolated in OKLCH and emitted as five stops, so a gradient between distant hues keeps its saturation instead of passing through gray.
CSS — compatible
Five hex stops. Renders identically everywhere.
linear-gradient(135deg, #7C5CFC 0%, #BF44B4 25%, #D34659 50%, #B86900 75%, #898300 100%)CSS — native OKLCH
Two stops, interpolated by the browser. Needs a modern browser.
linear-gradient(135deg in oklch shorter hue, #7C5CFC 0%, #898300 100%)Developer handoff
Tailwind 4 first, because that is what a current project wants — v4 has no config file and takes custom properties in a @theme block.
@theme {
--color-brand-50: #F4F4FF;
--color-brand-100: #E9E9FF;
--color-brand-200: #D4D2FF;
--color-brand-300: #BCB7FF;
--color-brand-400: #A298FF;
--color-brand-500: #7C5CFC;
--color-brand-600: #6F4CEB;
--color-brand-700: #5830C6;
--color-brand-800: #41189C;
--color-brand-900: #28026B;
--color-brand-950: #13003C;
}