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.

Core Color Tools

• Color Name Finder

  Find the name of any color instantly.

• Online Color Picker

  Pick 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 Converter

  Convert a color between every common format in one place.

• Color Information and Analyzer

  See everything about one color on one screen: all format values, relative luminance, WCAG contrast against black and white, the best 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 Generator

  Generate 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 Finder

  Find colors that look close to a base color, with the difference measured honestly.

• Complementary Color Finder

  Get the complementary color of any color — the hue directly opposite on the wheel.

• Color Harmony Generator

  Build complementary, analogous, triadic, tetradic and split-complementary color schemes from one base color.

• Color Difference Calculator

  Measure how different two colors really look.

• Color Mixer and Blender

  Mix two colors in any ratio and get the exact result.

• Shades, Tints and Tones Generator

  Generate shades (mixed with black), tints (mixed with white) and tones (mixed with gray) of any color in one pass.

• Color Wheel

  An interactive color wheel with harmony overlays.

• Color Temperature Calculator

  Estimate the correlated color temperature (CCT) of a color in kelvin using McCamy’s approximation from CIE chromaticity.

• Invert Color Generator

  Invert 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.

HEX, RGB, HSL and HSV Converters

• HEX to RGB Converter

  Convert a hex color code to RGB instantly.

• RGB to HEX Converter

  Convert RGB channel values to a hex color code.

• HEX to RGBA Converter

  Turn a hex color plus an opacity into rgba() — pick the color, slide the alpha, and get rgba(30, 144, 255, 0.

• RGBA to HEX Converter

  Convert rgba() colors to hex — including the alpha channel.

• HEX to HSL Converter

  Convert hex color codes to HSL — hue on the 360° wheel, saturation and lightness as percentages.

• HSL to HEX Converter

  Convert hsl() colors to hex codes.

• RGB to HSL Converter

  Convert 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 Converter

  Convert hsl() colors back to RGB channels.

• HEX to HSV Converter

  Convert 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 Converter

  Turn HSV/HSB picker values into a usable hex code.

• RGB to HSV Converter

  Convert RGB channels to HSV: value is the largest channel, saturation the spread relative to it, hue the angle from which channel dominates.

CMYK Converters

• HEX to CMYK Converter

  Convert 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 Converter

  Convert CMYK ink percentages to a hex code for screens.

• RGB to CMYK Converter

  Convert 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 Converter

  Convert CMYK values back to RGB for on-screen use.

LAB, OKLCH and Modern CSS Converters

• HEX to LAB Converter

  Convert 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 Converter

  Convert CIELAB values to hex.

• RGB to LAB Converter

  Convert RGB channels to CIELAB coordinates for perceptual work — color difference, gamut math, print pipelines.

• LAB to RGB Converter

  Convert CIELAB back to RGB channels.

• OKLCH to HEX Converter

  Convert oklch() colors to plain hex for older tooling and fallbacks.

• RGB to OKLCH Converter

  Convert RGB colors to OKLCH — the modern perceptual space behind new CSS color work, where equal lightness numbers actually look equally light.

• OKLCH to RGB Converter

  Convert oklch() values to RGB channels.

• OKLab Color Converter

  Convert 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 Converter

  Convert colors to and from CIELCH — CIELAB expressed as lightness, chroma and hue, the polar form that makes Lab intuitive to edit.

• XYZ Color Converter

  Convert between CIE XYZ (D65) and ordinary colors.

• CSS Color Format Converter

  Convert a whole list of CSS colors to one target notation in a single pass.

Color Palette Tools

• Color Palette Generator

  Generate complete color palettes in one click — random, warm, cool, earthy, vibrant or pastel.

• Palette Generator From HEX

  Turn one hex code into a full five-color palette.

• Color Palette From Image

  Build a design palette from any photo or screenshot.

• Website Color Palette Generator

  Turn 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 Generator

  Expand 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 Generator

  Generate palettes where every color is guaranteed to hold white or black text at your chosen WCAG level.

• Dark Mode Palette Generator

  Convert an existing light-theme palette into dark-mode equivalents.

• Monochromatic Palette Generator

  Build 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 Generator

  Generate a palette from two opposite hues.

• Analogous Palette Generator

  Create palettes from neighbouring hues — the base plus the colors 30° either side on the wheel.

• Triadic Palette Generator

  Generate three-hue palettes with hues spaced evenly 120° apart.

• Tetradic Palette Generator

  Build four-hue palettes from two complementary pairs at 90° spacing — the richest of the classic harmonies and the hardest to balance.

• Split Complementary Palette Generator

  Generate a base color plus the two hues flanking its complement (150° and 210° away).

• Pastel Color Palette Generator

  Create 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 Generator

  Generate a Material-style tonal palette — thirteen tones from 0 (black) to 100 (white) — from any source color, approximated in OKLCH.

• Gradient Palette Generator

  Turn 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 Extractor

  Extract the dominant colors from an image with their pixel percentages.

• Palette Sorter

  Sort any list of colors by hue, lightness, chroma or WCAG luminance.

Color Accessibility Tools

• Palette Contrast Matrix

  Check every color in a palette against every other in one table.

• Accessible Background Color Finder

  Fix a text color and find backgrounds that pass WCAG with it.

• Color Blindness Simulator

  See 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 Generator

  Generate palettes that stay distinguishable under color-blindness.

• WCAG Link Contrast Checker

  Check link colors properly: links must pass 4.

• UI Component Contrast Checker

  Check non-text contrast under WCAG 1.

• Accessible Color Pair Generator

  Generate ready-made foreground/background pairs in your brand hue that genuinely measure AA or AAA.

• APCA Contrast Calculator

  Calculate APCA lightness contrast (Lc) — the polarity-aware perceptual model being developed for WCAG 3.

Color Design System Tools

• OKLCH Palette Generator

  Generate 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 Checker

  Check whether colors fit inside the sRGB gamut — the baseline every display can show.

• Color Gamut Mapper

  Fit 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() Generator

  Build CSS color-mix() declarations visually: two colors, a percentage, and the interpolation space (srgb, oklab, oklch, hsl or lab).

• Bootstrap Theme Color Generator

  Generate Bootstrap 5 theme colors from your brand: the $theme-colors SCSS map for build-time customization and the –bs-* CSS variables for runtime (5.

• Data Visualization Palette Generator

  Generate 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 Checker

  Check text contrast over a gradient the way WCAG actually applies: at the weakest point the text touches, not the average.

Powered by