HCHTML Color
ColorsPalettesScalesDesign systemContrastConverterAll tools
ColorsPalette GeneratorColor Scale GeneratorDesign System From One ColorContrast CheckerColor ConverterColor PickerGradient GeneratorColor From ImageColor Blindness SimulatorColor NamerCSS Color Playground

All color tools

Eleven focused tools built on one OKLCH color engine. Pick a color once and carry it between tools.

◐Palette Generator

Harmony-based palettes generated in OKLCH with locking, reordering and instant copy.

▤Color Scale Generator

Turn one color into a 50–950 ramp, export as CSS variables, JSON or Tailwind theme.

◈Design System From One Color

Primary, neutral, success, warning, danger ramps plus semantic light/dark tokens.

◑Contrast Checker

WCAG ratios plus perceptual OKLCH repair suggestions when a pair fails.

⇄Color Converter

HEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLAB, OKLCH, CMYK and Display-P3 in one view.

◉Color Picker

A large OKLCH picker with lightness, chroma and hue sliders and gamut warnings.

▨Gradient Generator

Linear, radial and conic gradients interpolated in OKLCH, LAB, HSL or sRGB.

▣Color From Image

Extract dominant colors from any image locally and build a UI palette from them.

◍Color Blindness Simulator

Preview palettes as protanopia, deuteranopia, tritanopia and achromatopsia.

✎Color Namer

Name any color: descriptive name, closest CSS keyword and closest Tailwind shade.

⌘CSS Color Playground

Experiment with color-mix(), light-dark(), contrast-color() and relative color syntax.

Quick conversions

HEX → RGBHEX → HSLHEX → OKLCHRGB → HEXOKLCH → HEXOKLCH guide
HCHTML Color

Modern CSS color tooling. OKLCH-native, perceptual, and entirely client-side — no account, no upload, no API calls.

Tools

  • Palette Generator
  • Color Scale Generator
  • Design System From One Color
  • Contrast Checker
  • Color Converter
  • Color Picker
  • Gradient Generator

Conversions

  • HEX to RGB
  • HEX to HSL
  • HEX to OKLCH
  • RGB to HEX
  • OKLCH to HEX
  • OKLCH explained

Colors

  • Vivid Indigo
  • Vivid Red
  • Orange
  • Light Yellow
  • Vivid Green
  • Teal
  • Sky Blue
  • Blue
  • Vivid Violet
  • Vivid Pink
Browse all colors
Built for designers and front-end engineers · Color maths in OKLCH via culori