Color Picker & Palette Extractor
Pick colors from a spectrum, extract palettes from images, convert between HEX/RGB/HSL, and generate color harmonies. Everything runs in your browser — no uploads required.
Color Picker Tool
Color Harmonies
Extract Palette from Image
Upload an image to extract its dominant colors. Click any swatch to load it into the picker above.
Drop an image or click to extract its color palette
Supports JPEG, PNG, WebP
Understanding Color Theory
The Color Wheel
The color wheel is the foundation of color theory, organizing hues in a circular arrangement that reveals relationships between colors. Primary colors (red, blue, yellow in traditional theory; red, green, blue in digital light) cannot be created by mixing other colors. Secondary colors are created by mixing two primaries: orange (red + yellow), green (blue + yellow), and purple (red + blue). Tertiary colors sit between primaries and secondaries, creating a continuous spectrum of twelve distinct hues.
In digital design, the color wheel is based on the HSL (Hue, Saturation, Lightness) model, where hue is represented as a degree from 0 to 360. Red sits at 0 degrees, green at 120, and blue at 240. This angular representation makes it straightforward to calculate color relationships mathematically — complementary colors are always 180 degrees apart, triadic colors are 120 degrees apart, and analogous colors are within 30 degrees of each other.
Color Harmonies
Color harmonies are combinations of colors that produce aesthetically pleasing results based on their positions on the color wheel. The four most useful harmonies for designers are:
- Complementary: Two colors directly opposite on the wheel (180 degrees apart). Creates maximum contrast and visual energy. Use one color dominantly and the complement as an accent. Example: blue (#3B82F6) with orange (#F59E0B).
- Triadic: Three colors equally spaced at 120 degrees. Creates vibrant, balanced compositions. Works best when one color dominates and the other two serve as accents. Example: red, blue, yellow.
- Analogous: Three colors adjacent on the wheel (within 30 degrees). Creates harmonious, cohesive palettes that feel natural. Common in nature — think autumn leaves or ocean sunsets. Example: blue, blue-green, green.
- Split-Complementary: A base color plus the two colors adjacent to its complement. Provides strong contrast like complementary but with more nuance and less visual tension. Easier to work with than direct complementary for beginners.
Warm and Cool Colors
Colors are divided into warm (reds, oranges, yellows) and cool (blues, greens, purples) categories based on the psychological associations they evoke. Warm colors advance visually and feel energetic, inviting, and attention-grabbing. Cool colors recede and feel calm, professional, and trustworthy. Most effective designs combine warm and cool colors strategically — warm for calls-to-action and key elements, cool for backgrounds and supporting content.
Color Spaces: HEX, RGB, HSL Explained
HEX — The Web Standard
Hexadecimal color codes are the most widely used color notation in web development and design tools. A HEX code consists of a hash symbol followed by six hexadecimal digits: two for red, two for green, two for blue. Each pair ranges from 00 (no intensity) to FF (full intensity, equivalent to 255 in decimal). For example, #FF0000 is pure red, #00FF00 is pure green, and #FFFFFF is white.
HEX codes can be shortened to three digits when each pair consists of repeated characters: #FF6633 can be written as #F63. Modern CSS also supports 8-digit HEX codes where the last two digits specify alpha (opacity): #6366F180 represents the accent indigo at 50% opacity. HEX is compact and universally supported, making it the default choice for CSS, SVG, and most design tools.
RGB — Additive Color Mixing
RGB (Red, Green, Blue) defines colors by specifying the intensity of three light channels, each ranging from 0 to 255. Screens emit light, so RGB is an additive model: combining all three channels at full intensity (255, 255, 255) produces white, while all channels at zero produces black. CSS syntax is rgb(99, 102, 241) or with alpha: rgba(99, 102, 241, 0.5).
RGB is intuitive for understanding how screens produce color but less intuitive for color selection. Trying to find a "slightly lighter blue" by adjusting three independent values simultaneously is difficult. This is where HSL excels as a more human-friendly alternative.
HSL — Human-Friendly Color Selection
HSL (Hue, Saturation, Lightness) represents color in a way that maps to how humans think about color. Hue is the pure color on the wheel (0-360 degrees), saturation is the intensity or vibrancy (0-100%), and lightness is how light or dark the color is (0-100%). To make a color lighter, increase lightness. To make it more muted, decrease saturation. To shift the color, change the hue.
HSL is particularly powerful for creating color palettes. If your brand color is hsl(239, 84%, 67%), you can generate lighter and darker variants by adjusting only the lightness value: hsl(239, 84%, 85%) for a light tint and hsl(239, 84%, 35%) for a dark shade. The hue and saturation remain constant, ensuring visual consistency across your palette.
Web-Safe Colors and CSS
The History of Web-Safe Colors
Web-safe colors are a historical artifact from the 1990s when most monitors could only display 256 colors. The 216 web-safe colors (6 levels each of R, G, B: 00, 33, 66, 99, CC, FF) guaranteed consistent display across all systems. In 2026, this limitation is irrelevant — modern displays support millions or billions of colors. However, web-safe colors remain useful as a constrained palette for designers who want to work within a deliberately limited color set.
CSS Color Functions
Modern CSS supports multiple color notations beyond HEX and RGB. The hsl() function accepts hue in degrees, saturation and lightness as percentages. CSS Color Level 4 introduced lab() and lch() for perceptually uniform color spaces, oklch() for improved lightness uniformity, and color() for accessing wider color gamuts like Display P3. The color-mix() function allows blending colors directly in CSS without preprocessors.
CSS named colors provide 148 predefined color keywords from aliceblue to yellowgreen. While convenient for prototyping, named colors are rarely used in production design systems because they do not align with typical brand palettes. The most useful named colors are the neutrals: white, black, transparent, and currentColor (which inherits the text color).
Color Accessibility and Contrast
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.1 specify minimum contrast ratios between text and its background to ensure readability for users with visual impairments, including color blindness and low vision. Level AA (the standard compliance target) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). Level AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text.
Contrast ratio is calculated from the relative luminance of two colors, ranging from 1:1 (identical colors) to 21:1 (black on white). Light gray text on a white background might look aesthetically minimal, but if the contrast ratio falls below 4.5:1, it fails accessibility requirements and is legally non-compliant in many jurisdictions. The relative luminance formula weights green more heavily than red or blue, matching how human vision perceives brightness.
Color Blindness Considerations
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The most common types are protanopia (reduced red sensitivity) and deuteranopia (reduced green sensitivity), which together affect about 6% of males. Designing with color blindness in mind means never relying on color alone to convey information. Error states should include icons or text in addition to red coloring. Charts should use patterns or labels alongside color coding.
When selecting colors for data visualization or UI elements, test your palette with color blindness simulators. Avoid pairing red and green as the sole differentiators. Blue and orange is a more universally distinguishable combination. High contrast between adjacent colors helps all users, not just those with color deficiencies.
Practical Accessibility Tips
- Test early: Check contrast ratios during design, not after implementation. Tools like this color picker help you select accessible colors from the start.
- Use sufficient contrast: Aim for 7:1 (AAA) when possible. The difference between 4.5:1 and 7:1 is barely noticeable aesthetically but significantly improves readability.
- Avoid pure color reliance: Always supplement color with text, icons, patterns, or position to convey meaning.
- Consider dark mode: Users with light sensitivity often prefer dark themes. Ensure your color palette works in both light and dark contexts.
Frequently Asked Questions
A HEX color code is a 6-character string preceded by # that represents a color using hexadecimal values. The first two characters represent red, the middle two green, and the last two blue. For example, #FF0000 is pure red and #6366F1 is indigo. HEX is the most common color format used in web design and CSS.
Upload an image to the palette extraction section of this tool. The tool analyzes every pixel using the Canvas API, groups similar colors together, and identifies the 5-8 most dominant colors. Click any extracted swatch to load it into the main color picker for further adjustment or to view its HEX, RGB, and HSL values.
Complementary colors sit directly opposite each other on the color wheel, 180 degrees apart. They create maximum contrast and visual energy when used together. Examples include red and cyan, blue and orange, and yellow and purple. In design, use one color as the dominant and its complement as a small accent for maximum impact.
RGB (Red, Green, Blue) defines colors by mixing light intensities from 0-255 for each channel. HSL (Hue, Saturation, Lightness) is more intuitive for humans: hue is the color angle (0-360 degrees), saturation is vibrancy (0-100%), and lightness is brightness (0-100%). HSL makes it much easier to create lighter/darker variations or find related colors.
WCAG contrast ratio measures the luminance difference between text and background colors. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively. These ratios ensure readability for users with visual impairments. You can check contrast by comparing any two colors in the picker.