Color Converter - HEX, RGB, HSL & OKLCH

Convert colors between HEX, RGB, HSL, and OKLCH formats. Generate complementary, analogous, and triadic palettes. Export as CSS variables or Tailwind config.

#6b21a8

complementary

analogous

triadic

split Complementary

shades

tints

:root {
  --color-primary: #6b21a8;
  --color-complementary-1: #6a21a6;
  --color-complementary-2: #5da621;
  --color-analogous-1: #2721a6;
  --color-analogous-2: #6a21a6;
  --color-analogous-3: #a6219f;
}

Color Formats

HEX6-digit code, e.g. #6B21A8

RGBRed, Green, Blue (0-255)

HSLHue, Saturation, Lightness

OKLCHPerceptually uniform, modern CSS

Color Harmonies

Complementary — opposite on the wheel, strong contrast.

Analogous — adjacent colors, harmonious and cohesive.

Triadic — three equally spaced, balanced and vibrant.

Split-complementary — high contrast with less tension.

Related Tools

Color Info & Lookup

Contrast ratios, named colors, OKLCH values for any color.

WCAG Contrast Checker

Test palette colors against accessibility standards.

CSS Gradient Generator

Use your palette colors to build gradients visually.

Color Palette Extension

Extract complete palettes from any live website.

Extract color palettes from any website

MiroMiro's Chrome extension extracts complete color palettes from any live website - including HEX, RGB, and HSL values for every color used.

Add to Chrome