Color Picker
Pick colors, generate harmonies, and convert between color formats
Ready to use in your project
1/* Primary Color */2--color-primary: #3B82F6;3--color-primary-rgb: 59, 130, 246;4--color-primary-hsl: 217, 91%, 60%;5 6/* Color Harmony: Complementary */7--color-1: #3B82F6;8--color-2: #F6AF3B;Color harmony is the art of combining colors in a way that is pleasing to the eye. Understanding the color wheel and its relationships is fundamental to creating beautiful, balanced designs.
1The Color Wheel
Primary Colors
Cannot be created by mixing other colors
Secondary Colors
Created by mixing two primary colors
Tertiary Colors
Created by mixing primary and secondary
2Color Harmony Types
Complementary
Maximum contrast
Analogous
Serene harmony
Triadic
Vibrant balance
Tetradic
Rich variety
Monochromatic
Elegant focus
3The 60-30-10 Rule
A classic interior design rule that works beautifully for UI design. Use your dominant color for 60%, secondary for 30%, and accent for 10%.
4Color Psychology
5Best Practices
Accessibility
- Ensure minimum 4.5:1 contrast ratio for text
- Don't rely solely on color to convey meaning
- Test with color blindness simulators
Design Tips
- Limit your palette to 3-5 colors
- Use neutrals to balance vibrant colors
- Consider cultural color associations
6Quick Reference
| Harmony | Best For | Effect |
|---|---|---|
| Complementary | CTAs, Highlights | High contrast |
| Analogous | Backgrounds, Themes | Cohesive |
| Triadic | Playful designs | Vibrant |
| Tetradic | Complex UIs | Diverse |
| Monochromatic | Minimal designs | Elegant |
What is CSS Color Picker?
CSS supports multiple color formats: hexadecimal (`#ff0000`), RGB (`rgb(255, 0, 0)`), HSL (`hsl(0, 100%, 50%)`), and newer formats like OKLCH and LCH. Each format has strengths — HEX is compact for static values, RGB maps directly to screen output, and HSL is intuitive for creating color harmonies and adjusting lightness/saturation. Understanding color theory helps create accessible, visually coherent designs.
Read the full CSS Color Formats guideTips & Best Practices
- 1Use HSL for creating color palettes — adjust lightness for shades and saturation for vibrancy.
- 2Check color contrast ratios against WCAG guidelines: 4.5:1 for normal text, 3:1 for large text.
- 3Create color scales by keeping hue constant and varying lightness in even steps (e.g., 10%, 20%, ..., 90%).
- 4Use complementary colors (opposite on the color wheel) for high contrast or analogous colors (adjacent) for harmony.
- 5Prefer named CSS colors (`tomato`, `coral`, `slateblue`) for prototyping — they're readable and memorable.
- 6Use `color-mix()` in CSS to blend colors without preprocessors.
Frequently Asked Questions
HEX is a compact notation (#RRGGBB) where each pair is a hex value 00-FF. RGB specifies red, green, and blue channels as 0-255 values. HSL uses hue (0-360°), saturation (0-100%), and lightness (0-100%). All three can represent the same colors; the difference is readability and ease of manipulation.
Color harmonies are combinations of colors based on their positions on the color wheel. Common harmonies include complementary (opposite colors), analogous (adjacent colors), triadic (three equally spaced), and split-complementary (one color plus two adjacent to its complement).
Check the contrast ratio between text and background colors. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 and 4.5:1 respectively. Use tools that report contrast ratios and suggest accessible alternatives.
Yes. Use rgba() or hsla() with a fourth alpha value (0-1), or the 8-digit hex format (#RRGGBBAA). Modern CSS also supports the `/ alpha` syntax: `rgb(255 0 0 / 0.5)` and `hsl(0 100% 50% / 0.5)`.
OKLCH is a perceptually uniform color space that makes it easier to create consistent color palettes. Unlike HSL, equal steps in lightness look equally different to the human eye. It is supported in all modern browsers and is ideal for design systems.