palette Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK with color picker

Color Picker

Click to pick a color or enter values in any format

#6366F1
#
R
G
B
H
S
L
H
S
V
C
M
Y
K

CSS Color Values

Ready-to-use CSS code

#6366F1
rgb(99, 102, 241)
rgba(99, 102, 241, 1)
hsl(239, 84%, 67%)
hsla(239, 84%, 67%, 1)
hwb(239 39% 5%)

Color Harmonies

Complementary and related colors based on color theory

Shades & Tints

Variations from dark to light

Popular Colors

Click to select a color

About the Color Converter

Convert colors instantly between HEX, RGB, HSL, HSV, and CMYK formats with our free online color converter. Features a visual color picker, CSS-ready output, color harmonies, and shade/tint generation—all processed entirely in your browser.

Color Format Reference

  • HEX — 6-digit hexadecimal representation (#RRGGBB). The most common format for web colors. Each pair represents red, green, and blue from 00-FF.
  • RGB — Red, Green, Blue values from 0-255. The native color format for screens and digital displays.
  • HSL — Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Intuitive for adjusting colors: hue is the color, saturation is intensity, lightness controls brightness.
  • HSV/HSB — Hue (0-360°), Saturation (0-100%), Value/Brightness (0-100%). Similar to HSL but Value represents "amount of light" rather than lightness. Popular in design software like Photoshop.
  • CMYK — Cyan, Magenta, Yellow, Key/Black (0-100% each). Used for print design. Note: CMYK conversions are approximate since they depend on printer profiles.

Understanding Color Harmonies

Color harmonies are combinations of colors that work well together based on their positions on the color wheel:

  • Complementary — Colors opposite each other on the wheel (180° apart). Creates high contrast and visual tension.
  • Analogous — Colors adjacent on the wheel (30° apart). Creates harmonious, cohesive designs.
  • Triadic — Three colors equally spaced (120° apart). Offers vibrant, balanced contrast.
  • Split-Complementary — A color plus two colors adjacent to its complement. Less tension than pure complementary.
  • Tetradic (Square) — Four colors forming a square on the wheel. Rich color schemes that need careful balancing.

When to Use Each Format

Format Best For
HEX Web development, CSS, sharing colors in a compact format
RGB CSS, JavaScript color manipulation, screen displays
HSL CSS variables, creating color variations, accessibility
HSV Design software, color pickers, image editing
CMYK Print design, physical media (note: conversions are approximate)

Tips for Web Designers

  • Use HSL for variations — Adjust lightness for hover states (e.g., darken by 10%), keeping hue and saturation constant.
  • CSS custom properties — Store HSL components separately for maximum flexibility: --color-h: 239; --color-s: 84%; --color-l: 67%;
  • Accessibility — Ensure sufficient contrast ratios (WCAG recommends 4.5:1 for normal text, 3:1 for large text).
  • CMYK warning — RGB and HEX colors may look different when printed. Always verify CMYK values with your print provider.