Color Tools

Every color tool in one place: converters for every format from hex to OKLCH, palette generators, contrast and color-blindness checkers, and modern CSS color utilities. All 70+ tools run locally in your browser with exact CSS Color Level 4 math — nothing you enter is uploaded.

Start from what you are trying to do

Build a palette that stays accessibleA palette with its contrast checked and its behaviour under colour blindness known.4 steps, starting with Online Color Picker
Get a brand colour into every format you needOne colour expressed as HEX, RGB, HSL, CMYK and modern CSS, ready for any brief.4 steps, starting with Online Color Picker
Pull a palette out of an imageAn ordered palette taken from a photograph or screenshot, with its contrast checked.3 steps, starting with Color Palette From Image
Add a dark modeA dark palette matched to your light one, with both themes checked for contrast.3 steps, starting with Dark Mode Palette Generator

Core Color Tools

Color Name FinderFind the name of any color instantly.
Online Color PickerPick any color visually and get its value in every format at once — HEX, RGB, HSL, HWB, HSV, CMYK, LAB, LCH, OKLab, OKLCH and XYZ.
Complete Color ConverterConvert a color between every common format in one place.
Color Information and AnalyzerSee everything about one color on one screen: all format values, relative luminance, WCAG contrast against black and white, the higher-contrast text color to put on it, its hue family, OKLCH coordinates, approximate color temperature, closest CSS name and how it survives a color-blindness simulation.
Random Color GeneratorGenerate random colors on demand — truly random across the whole sRGB space, or constrained to balanced, pastel, dark or vivid styles that are generated in OKLCH so every roll is usable.
Similar Color FinderFind colors that look close to a base color, with the difference measured honestly.
Complementary Color FinderGet the complementary color of any color — the hue directly opposite on the wheel.
Color Harmony GeneratorBuild complementary, analogous, triadic, tetradic and split-complementary color schemes from one base color.
Color Difference CalculatorMeasure how different two colors really look.
Color Mixer and BlenderMix two colors in any ratio and get the exact result.
Shades, Tints and Tones GeneratorGenerate shades (mixed with black), tints (mixed with white) and tones (mixed with gray) of any color in one pass.
Color WheelAn interactive color wheel with harmony overlays.
Color Temperature CalculatorEstimate the correlated color temperature (CCT) of a color in kelvin using McCamy’s approximation from CIE chromaticity.
Invert Color GeneratorInvert any color two ways: the classic RGB inversion (255 minus each channel — what CSS filter: invert(1) does) or a perceptual lightness flip in OKLCH that keeps the hue while swapping light for dark.

Color Converters

HEX to RGB ConverterConvert a hex color code to RGB instantly.
RGB to HEX ConverterConvert RGB channel values to a hex color code.
HEX to RGBA ConverterTurn a hex color plus an opacity into rgba() — pick the color, slide the alpha, and get rgba(30, 144, 255, 0.6), the modern slash syntax and the 8-digit hex form (#1e90ff99) all at once.
RGBA to HEX ConverterConvert rgba() colors to hex — including the alpha channel.
HEX to HSL ConverterConvert hex color codes to HSL — hue on the 360° wheel, saturation and lightness as percentages.
HSL to HEX ConverterConvert hsl() colors to hex codes.
RGB to HSL ConverterConvert RGB values to HSL and see the arithmetic: lightness is the average of the largest and smallest channel, saturation comes from their spread, and hue from which channel leads.
HSL to RGB ConverterConvert hsl() colors back to RGB channels.
HEX to HSV ConverterConvert hex colors to HSV (also called HSB) — the hue/saturation/value model used by the color pickers in Photoshop, GIMP and Figma.
HSV to HEX ConverterTurn HSV/HSB picker values into a usable hex code.
RGB to HSV ConverterConvert RGB channels to HSV: value is the largest channel, saturation the spread relative to it, hue the angle from which channel dominates.
HEX to CMYK ConverterConvert a hex color to CMYK ink percentages using the standard formula: black is the missing brightness, then cyan, magenta and yellow cover what remains.
CMYK to HEX ConverterConvert CMYK ink percentages to a hex code for screens.
RGB to CMYK ConverterConvert RGB screen colors to CMYK ink percentages, with the working shown: K = 1 − max(R,G,B)/255, then C, M and Y from the remaining ink.
CMYK to RGB ConverterConvert CMYK values back to RGB for on-screen use.
HEX to LAB ConverterConvert hex colors to CIELAB — the classic perceptual space where L* is lightness and a*/b* are the green–red and blue–yellow axes.
LAB to HEX ConverterConvert CIELAB values to hex.
RGB to LAB ConverterConvert RGB channels to CIELAB coordinates for perceptual work — color difference, gamut math, print pipelines.
LAB to RGB ConverterConvert CIELAB back to RGB channels.
OKLCH to HEX ConverterConvert oklch() colors to plain hex for older tooling and fallbacks.
RGB to OKLCH ConverterConvert RGB colors to OKLCH — the modern perceptual space behind new CSS color work, where equal lightness numbers actually look equally light.
OKLCH to RGB ConverterConvert oklch() values to RGB channels.
OKLab Color ConverterConvert any color to and from OKLab — the rectangular form of OKLCH, with L for lightness and a/b axes instead of chroma and hue.
LCH Color ConverterConvert colors to and from CIELCH — CIELAB expressed as lightness, chroma and hue, the polar form that makes Lab intuitive to edit.
XYZ Color ConverterConvert between CIE XYZ (D65) and ordinary colors.
CSS Color Format ConverterConvert a whole list of CSS colors to one target notation in a single pass.

Color Palettes

Color Palette GeneratorGenerate complete color palettes in one click — random, warm, cool, earthy, vibrant or pastel.
Palette Generator From HEXTurn one hex code into a full five-color palette.
Color Palette From ImageBuild a design palette from any photo or screenshot.
Website Color Palette GeneratorTurn one brand color into a complete website palette: background, surface, border, text, muted text, primary, hover, link, on-primary and semantic success/warning/danger — for light or dark theme.
Brand Color Palette GeneratorExpand a primary brand color into a working brand system: dark and light primary variants, a hue-shifted secondary, a contrasting accent and three brand-tinted neutrals.
Accessible Color Palette GeneratorGenerate palettes where every color is fitted until it holds white or black text at your chosen WCAG level, with each measured ratio shown beside it.
Dark Mode Palette GeneratorConvert an existing light-theme palette into dark-mode equivalents.
Monochromatic Palette GeneratorBuild a one-hue palette from any base color: the base plus perceptually even shades toward black and tints toward white, blended in OKLab so the steps look uniform.
Complementary Palette GeneratorGenerate a palette from two opposite hues.
Analogous Palette GeneratorCreate palettes from neighbouring hues — the base plus the colors 30° either side on the wheel.
Triadic Palette GeneratorGenerate three-hue palettes with hues spaced evenly 120° apart.
Tetradic Palette GeneratorBuild four-hue palettes from two complementary pairs at 90° spacing — the richest of the classic harmonies and the hardest to balance.
Split Complementary Palette GeneratorGenerate a base color plus the two hues flanking its complement (150° and 210° away).
Pastel Color Palette GeneratorCreate pastel palettes that hang together: every color shares one high lightness and one low chroma in OKLCH, with hues spread evenly from your anchor color.
Material-Style Palette GeneratorGenerate a Material-style tonal palette — thirteen tones from 0 (black) to 100 (white) — from any source color, approximated in OKLCH.
Gradient Palette GeneratorTurn two colors into a discrete palette of evenly blended steps — 3 to 16 stops interpolated in OKLab, so the middle never goes muddy the way naive RGB blends do.
Color Palette ExtractorExtract the dominant colors from an image with their pixel percentages.
Palette SorterSort any list of colors by hue, lightness, chroma or WCAG luminance.

Color Accessibility

Palette Contrast MatrixCheck every color in a palette against every other in one table.
Accessible Background Color FinderFix a text color and find backgrounds that pass WCAG with it.
Color Blindness SimulatorSee your colors as people with protanopia, deuteranopia or tritanopia see them, using the peer-reviewed Machado (2009) simulation matrices with adjustable severity.
Color Vision Safe Palette GeneratorGenerate palettes that stay distinguishable under color-blindness.
WCAG Link Contrast CheckerCheck link colors properly: links must pass 4.5:1 against the background like any text, and un-underlined links additionally need 3:1 against the surrounding body text plus a non-color cue.
UI Component Contrast CheckerCheck non-text contrast under WCAG 1.4.11: input borders, icons, focus rings and state indicators need 3:1 against adjacent colors.
Accessible Color Pair GeneratorGenerate ready-made foreground/background pairs in your brand hue that genuinely measure AA or AAA.
APCA Contrast CalculatorCalculate APCA lightness contrast (Lc) — the polarity-aware perceptual model being developed for WCAG 3.

Design Tokens

OKLCH Palette GeneratorGenerate palettes where every color shares the same OKLCH lightness and chroma — the property that makes sets look genuinely uniform, which HSL cannot deliver.
sRGB Gamut CheckerCheck whether colors fit inside the sRGB gamut — the baseline every display can show.
Color Gamut MapperFit an out-of-gamut color into sRGB the right way: hold lightness and hue in OKLCH and reduce only chroma until it fits — the CSS-style approach — and compare that against naive channel clipping, which visibly shifts hue.
CSS color-mix() GeneratorBuild CSS color-mix() declarations visually: two colors, a percentage, and the interpolation space (srgb, oklab, oklch, hsl or lab).
Bootstrap Theme Color GeneratorGenerate Bootstrap 5 theme colors from your brand: the $theme-colors SCSS map for build-time customization and the –bs-* CSS variables for runtime (5.3+).
Data Visualization Palette GeneratorGenerate chart palettes with the three shapes data actually needs: categorical (distinct series), sequential (low-to-high) and diverging (around a midpoint) — built in OKLCH, previewed in grayscale, and stress-tested with a deuteranopia check that reports the weakest series pair.
Gradient Accessibility CheckerCheck text contrast over a gradient the way WCAG actually applies: at the weakest point the text touches, not the average.

Frequently asked questions

Are these color tools free to use?

Yes — every tool in this section is free, needs no account, and has no usage limits. They run entirely in your browser, which is also why there is nothing to sign up for: there is no server doing the work that would need to meter you.

Do my colors or images get uploaded anywhere?

No. Every conversion, palette and contrast check is computed locally in your browser with JavaScript. The image tools draw your file to an in-page canvas and sample pixels there — your browser's network tab will show no upload. The pages keep working offline once loaded.

Which color tool should I start with?

If you have a color already, start with the Complete Color Converter or the Color Analyzer. If you need a palette, start with the Color Palette Generator or Palette From HEX. If you are fixing an accessibility problem, start with the WCAG Contrast Checker and Palette Contrast Matrix.

How accurate are the conversions?

They follow the CSS Color Level 4 reference pipeline — the same matrices, gamma handling and white-point adaptation browsers implement — and are checked against the specification's published values in an automated test suite. CMYK is the one deliberate exception, and is labelled as a device-independent approximation everywhere it appears.

What is OKLCH, and why do so many of these tools use it?

OKLCH is a perceptual color space where equal numbers look equal: two colors with the same lightness value genuinely appear equally light, which is not true in HSL. Palette, shade and dark-mode tools work in it because that property is what makes generated sets look coherent without hand-tuning.

Can I use the generated colors and palettes commercially?

Yes. Color values are facts, not creative works — a hex code cannot be copyrighted, and nothing generated here carries licence conditions. Use the output in client work, products and publications freely.

Do these tools work on phones and tablets?

Yes — the layouts are responsive, controls are touch-sized, and the tools run on mobile browsers exactly as they do on desktop. The image tools also accept photos straight from your device, still processed locally.

One cluster, every color question

This hub collects the full color toolkit: seventy-plus browser-based tools spanning conversion between every notation in use, palette generation from theory, seeds and images, accessibility measurement against real standards, and the modern CSS color stack — OKLCH, gamut management, color-mix(). Everything computes locally with the exact CSS Color Level 4 mathematics browsers implement, verified against the specification’s reference values in automated tests. Nothing you enter — colors, palettes, images — is uploaded anywhere.

Finding the right tool fast

The categories mirror how color questions actually arrive. Core tools answer “what is this color?” — picking, naming, analyzing, comparing. Converters answer “same color, different notation” across the HEX/RGB/HSL family, print’s CMYK, and the Lab/OKLCH generation. Palette tools build coordinated sets — from harmony geometry, from a single seed hex, from photographs. Accessibility tools measure what the standards measure: WCAG ratios, component contrast, color-vision safety, APCA. Design-system tools handle the shipping end: gamut checks, framework themes, chart palettes, CSS color-mix().

Three habits this cluster is built around

First: measure, do not estimate — every contrast number here is computed with the WCAG formula, every “similar” is a CIEDE2000 distance, every palette claim is checkable. Second: work perceptually — the palette and variant tools run in OKLCH because equal numbers should mean equal appearance; it is why their output looks coherent without hand-tuning. Third: state limits honestly — CMYK values are labeled nominal, APCA beta, CVD simulation approximate, name matching dataset-bound. Tools that pretend otherwise produce confident errors; these prefer accurate modesty.

Where to start

With a color in hand: the Complete Color Converter or Color Analyzer. With nothing but a direction: the Color Palette Generator or an image and its Palette From Image. With a compliance deadline: the WCAG Contrast Checker and Palette Contrast Matrix. With a design system to modernize: the OKLCH tools and the token generators in the adjacent design-token cluster. Every tool links its natural neighbors, so any entry point reaches the rest.