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 จำเป็นสำหรับคุณสมบัติแบบโต้ตอบ กรุณาเปิดใช้งาน JavaScript ในเบราว์เซอร์ของคุณเพื่อใช้เครื่องมือนี้

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 varies lightness while keeping hue and saturation from the base. 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.

คำถามที่พบบ่อย

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.