Color Picker

Pick colors and convert between HEX, RGB, HSL, HSB, and CSS formats — with shades, tints, and palette generation.

Shades & Tints
Color Harmonies
CSS Variables

    
  




About Color Picker
Colors in web development can be expressed in multiple formats: HEX (the most common, e.g. #3b82f6), RGB (red-green-blue components 0-255), HSL (hue-saturation-lightness, the most intuitive for humans), and HSB/HSV (hue-saturation-brightness). Understanding how to convert between these formats is essential for frontend development, design systems, and CSS theming.
Color harmonies are mathematically derived color combinations that look visually pleasing together. Complementary colors (opposite on the color wheel) create high contrast. Analogous colors (adjacent) create smooth, cohesive palettes. Triadic (3 evenly spaced) and tetradic (4 evenly spaced) colors create vibrant, balanced palettes. These principles are used in professional design tools like Figma, Adobe Color, and Coolors.


FAQ


When should I use HSL vs HEX?
HSL is more intuitive for programmatic color manipulation — you can easily create lighter/darker variants by adjusting lightness, or related hues by adjusting hue. HEX is more compact for static colors in CSS. Modern CSS supports both equally well, and CSS custom properties work great with HSL for building flexible design tokens.


What is color contrast ratio?
Contrast ratio measures the difference in luminance between foreground and background colors. WCAG 2.1 requires a minimum 4.5:1 ratio for normal text (AA) and 7:1 for enhanced accessibility (AAA). Tools like the WebAIM contrast checker help verify your color choices meet accessibility standards.


Related Tools
Gradient GeneratorFrontend ToolsBox Shadow GeneratorFrontend ToolsBorder Radius GeneratorFrontend ToolsColor PickerFrontend ToolsTailwind GeneratorFrontend Tools