Color Picker & Palette Generator — HEX, RGB, HSL Color Codes
Pick any color and get instant codes in HEX, RGB, HSL, CMYK, LAB, and XYZ. Switch to the Palette Generator to build harmonious brand color palettes using color theory — export as CSS variables, JSON, or save for later. Free color code picker online with contrast checking.
What Is a Color Picker?
A color picker is a tool that lets you select any color visually and get its exact values across every format — HEX for web CSS, RGB for screen displays, HSL for design adjustments, CMYK for print production, and LAB/XYZ for precision color science. This tool works as a hex color code finder, an RGB to HEX converter, a hex to HSL converter, and a color contrast checker — all in one interface. Pick a color from the gradient canvas, type a hex code directly, or use the EyeDropper to sample any pixel on your screen.
What Is a Palette Generator?
A palette generator uses color theory to build harmonious sets of colors from a single seed color. Rather than guessing which colors look good together, you get mathematically balanced relationships: complementary pairs, triadic triplets, analogic families, and more. This makes it a brand color palette generator — pick your primary brand color, select a harmony mode, and generate a complete palette ready for your website, app, or design system.
Supported Color Formats
This tool converts between six color formats in real time. Click any format value to copy it to your clipboard:
| Format | Example | Best Used For |
|---|---|---|
| HEX | #3F7FE0 | CSS, web design, brand guidelines |
| RGB | rgb(63, 127, 224) | Screens, digital design, JavaScript |
| HSL | hsl(220, 72%, 56%) | Design adjustments — easy to tweak lightness and saturation |
| CMYK | cmyk(72%, 43%, 0%, 12%) | Print design — magazines, packaging, business cards |
| LAB | L 53, a 5, b -55 | Perceptually uniform — accurate color matching across devices |
| XYZ | 23, 22, 72 | Device-independent CIE standard, scientific applications |
How to Convert HEX to RGB
HEX and RGB represent the same thing — red, green, and blue channel values — just in different number systems. A HEX color code like #3F7FE0 is three pairs of hexadecimal digits: 3F for red, 7F for green, E0 for blue. To convert each pair to RGB, convert from base-16 to base-10: 3F = 63, 7F = 127, E0 = 224, giving rgb(63, 127, 224).
This tool handles the conversion automatically — pick or enter any color and all six formats update in real time. This makes it both an RGB to HEX converter (click the HEX value to copy) and a hex to HSL converter (click HSL to copy that format).
Color Harmony Modes Explained
Color harmony is the art of combining colors that look aesthetically pleasing together. The palette generator uses color theory to calculate these harmonies mathematically:
- Analogic: Adjacent colors on the wheel — calm, cohesive, and easy on the eyes. Great for backgrounds and subtle UI themes.
- Complementary: Colors directly opposite each other on the wheel. This is the complementary color finder mode — it creates high contrast and visual energy. Perfect for call-to-action buttons against a background.
- Analogic & Complement: The richest blend — a family of adjacent colors plus one contrasting accent. The most versatile mode for full website palettes.
- Triadic: Three colors equally spaced around the wheel — vibrant, dynamic, and balanced. Popular in playful or creative brands.
- Quadratic: Four colors forming a rectangle on the wheel — complex and versatile, ideal for data visualization and dashboards.
- Monochrome: Tints and shades of a single hue — clean, elegant, and impossible to get wrong. The safest starting point for minimalist design.
What Are Complementary Colors?
Complementary colors sit directly opposite each other on the color wheel. Red and green, blue and orange, yellow and purple are the classic pairs. When placed side by side, complementary colors create maximum visual contrast — which is why they are used so heavily in call-to-action design, sports branding, and advertising. Select "Complementary" in the palette generator to instantly find the complementary pair for any color you pick.
What Is the 60-30-10 Color Rule?
The 60-30-10 rule is a design guideline for distributing colors in any visual project. It works for websites, interiors, presentations, and brand identity:
- 60% — Dominant color: Your main background or primary brand color. Sets the overall tone and mood. Usually the most neutral or muted color in your palette.
- 30% — Secondary color: Used for supporting elements like sidebars, cards, sections, or secondary buttons. Creates visual interest without competing with the dominant color.
- 10% — Accent color: The boldest, most contrasting color. Reserved for call-to-action buttons, links, highlights, and elements you want the eye drawn to first.
Generate a 3-color palette using the Complementary or Analogic mode, then apply the 60-30-10 split to your design. The result is a balanced, professional color scheme that avoids the common mistake of using too many colors at equal weight.
Color Contrast Checker
The contrast preview section under the color picker shows how your selected color looks with white text, black text, and as text on a white background. This is a quick color contrast checker for accessibility — ensuring text remains readable against your chosen background. WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Dark colors generally need white text; light colors need black text. The preview updates in real time as you pick.
How to Use This Tool for Brand Design
- Step 1: Pick your primary brand color using the color picker or enter its HEX code directly.
- Step 2: Switch to the Palette Generator and select a harmony mode — Analogic & Complement is the most versatile for brand palettes.
- Step 3: Adjust the color count (3 to 9 colors) and click Generate.
- Step 4: Lock any colors you love and regenerate to explore variations.
- Step 5: Export your palette as CSS variables, JSON, or a HEX list for your design system.
- Step 6: Apply the 60-30-10 rule to distribute your palette across your website or app.
Once you have your brand colors finalized and you are building design assets, our image resizer can prepare images in the exact dimensions your design requires, and our image converter handles format conversions between PNG, JPEG, WebP, and other formats for web-optimized delivery.
Frequently Asked Questions
How do I generate a color palette?
What does locking a color do?
How do I export a palette for CSS?
Can I pick a color from my screen?
How do I convert HEX to RGB?
What are complementary colors?
What is the 60-30-10 color rule?
Can I use this for print design (CMYK)?
Is this tool free to use?
Build Better Color Systems
Whether you are designing a website, building a brand identity, preparing artwork for print, or checking accessibility contrast, this tool gives you precise color values and harmonious palette generation in one place. Pick a color, get every format, generate a palette, and export it — all without leaving the page. For your visual assets, our image resizer handles dimension adjustments and our image converter prepares images in the right format for web or print.