Language:English
Chromoforge

CSS color variables generator

Start with a color and get a ready-to-copy :root block. It includes the base color, a readable foreground and eleven primary shades.

Generate CSS

Chroma reduction preserves the intended lightness and hue before rounding to HEX. Original keeps previous palettes and links.

Use HEX, RGB, HSL or OKLCH. OKLCH accepts numeric or percentage lightness/chroma and angle units. Only opaque colors are supported; out-of-sRGB values are clipped with a notice.

Selected color#E24B4AText on this color: #111111

50–950 shade scale

:root {
  --brand: #E24B4A;
  --on-brand: #111111;
  --primary-50: #FFEEEC;
  --primary-100: #FFDDD8;
  --primary-200: #FFBCB5;
  --primary-300: #F5918A;
  --primary-400: #E24B4A;
  --primary-500: #C1282F;
  --primary-600: #9A000A;
  --primary-700: #7B0000;
  --primary-800: #5C0000;
  --primary-900: #410000;
  --primary-950: #2E0000;
}
Convert this colorCheck text and background

From one color to CSS tokens

  1. Enter a HEX, RGB, HSL or OKLCH color, or use the picker. The result updates on this page.
  2. Copy the complete :root block or download a CSS file. Each shade can also be copied separately.
  3. Use var(--brand), var(--on-brand) and var(--primary-50) through var(--primary-950) in your stylesheet.

Check the roles before using the scale

The original color is preserved at the nearest shade position. The shade numbers are labels, not contrast guarantees. --on-brand is chosen for opaque text on --brand only; check other text/background pairs separately. For a palette with multiple harmonies and other export formats, continue to the main palette tool.

Continue with your color

Color Shades GeneratorGenerate a 50-950 shade scale from one base color for Tailwind-style UI surfaces, borders, hover states and dark mode.Color converter: HEX, RGB, HSL and OKLCHConvert HEX, RGB, HSL or OKLCH to HEX, RGB, HSL and OKLCH immediately. Copy each format or a CSS variable. Free, local and no account required.WCAG Contrast CheckerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.