Hex Color Picker & Converter (RGB, HSL, HSV)

Convert hex to RGB, HSL, and HSV, copy harmony swatches, and export CSS or JSON—right in your browser.

JavaScript is required for interactive features. Please enable JavaScript in your browser to use this tool.

Hex color

Enter #RGB or #RRGGBB (with or without #). Invalid values keep the last good conversion.

Conversions

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Harmony swatches

Harmony type

Swatch count

Tint / shade strip

Tint/shade steps

Export swatches

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Pick or paste a hex color, convert to RGB, HSL, and HSV, generate complementary/analogous/triadic/monochrome swatches, copy values, and export CSS or JSON. Free, fast, and runs entirely in your browser.

How to use this hex color picker

Type or paste a hex value, or use the native picker. The page converts it to RGB, HSL, and HSV instantly, generates harmony swatches and a tint/shade strip, and keeps everything copy-ready. Share your setup with the URL—state is stored in the query string.

Hex, RGB, HSL, and HSV reference

Hex is a compact RGB encoding. RGB describes red/green/blue channels. HSL expresses hue, saturation, and lightness; HSV uses hue, saturation, and value (brightness). This tool uses deterministic math in your browser—no uploads and no external APIs.

Complementary, analogous, triadic, and monochromatic

Complementary rotates hue 180°. Analogous steps hue by a fixed angle around your base. Triadic uses 120° offsets. Monochromatic holds hue and varies lightness. Count controls apply to analogous and monochromatic modes.

CSS variables and JSON export

Export produces :root custom properties with stable names (for example --color-base, --color-analogous-1) and JSON with baseHex, harmony mode, and swatch lists for scripts or design tokens.

Frequently Asked Questions

Does #ABC expand to six digits?

Yes. Three-digit hex is expanded per digit pair, so #ABC becomes #AABBCC.

What happens if my hex is invalid?

You see an inline error. The last valid color stays in the conversion rows, picker, and exports until you enter a valid hex again.

How are harmony colors calculated?

They are deterministic: complementary is a 180° hue shift in HSL; analogous uses fixed hue steps; triadic uses 120° offsets; monochromatic varies lightness while keeping hue and saturation from the base.

What is in the JSON export?

Stable keys: baseHex, harmony, harmonyCount where applicable, harmonySwatches (hex strings), tintShadeStrip, and stripCount—suitable for tooling or documentation.

Can I share my colors?

Yes. The URL updates with hex, harmony mode, counts, and strip size so you can bookmark or share an exact setup.