ChromaNest

Hex color picker

Hex notation (#RRGGBB) is the web’s native way to specify colors. Pair a picker with HSL when you want to tweak lightness without hunting RGB values.

Pick colors & build a palette

Hex + HSL palette playground

Lock colors you like, then regenerate the rest.

#3a6fed

hsl(222, 83%, 58%)

#403aed

hsl(242, 83%, 58%)

#7c3aed

hsl(262, 83%, 58%)

#b83aed

hsl(282, 83%, 58%)

#ed3ae7

hsl(302, 83%, 58%)

CSS variables

:root {
  --color-1: #3a6fed;
  --color-2: #403aed;
  --color-3: #7c3aed;
  --color-4: #b83aed;
  --color-5: #ed3ae7;
}

Tailwind snippet

// tailwind.config — theme.extend.colors
brand: {
        100: "#3a6fed",
        200: "#403aed",
        300: "#7c3aed",
        400: "#b83aed",
        500: "#ed3ae7",
}

What is a hex color?

A six-digit hex color encodes red, green, and blue channels as two hexadecimal digits each. #7c3aed means R=124, G=58, B=237. Three-digit shorthand (#f0a) expands by doubling each digit.

Hex vs HSL

Designers often think in hue, saturation, and lightness. ChromaNest shows HSL beside every swatch so you can nudge lightness for accessible text while keeping the same hue family.

Workflow tips