▸ Color Picker

Neon Green

HEX

RGB

HSL

CMYK

▸ Contrast Checker (WCAG)

Text Color

Background Color

The quick brown fox jumps over the lazy dog

Small text (14px)

Contrast Ratio

4.5:1

Calculating...

Normal Text (14-18px)

AA AAA

Large Text (18px+ or 14px+ bold)

AA AAA

UI Components (Graphics & UI)

▸ Import Palette

Paste HEX codes (comma or space separated)

Paste CSS variables

Paste JSON palette

▸ Color Blindness Simulator

💡 Preview how your working palette appears to users with different types of color vision deficiency

Your palette as seen by people with normal color vision.

▸ Extract Colors from Image

📸

Click to upload or drag & drop an image

JPG, PNG, GIF, WebP (max 10MB)

⚡ Working Palette

💡 Drag colors to reorder • Click to edit • Right-click to copy

▸ Color Harmonies

💡 Click a color to view it • Right-click to add to palette • Use button above to load all

▸ Gradient Generator

Color 1

Color 2

Type

Angle 90°

CSS Code

▸ Shades & Tints

Tints (+ White)

Shades (+ Black)

Tones (+ Gray)

▸ Saved Palettes Local

No saved palettes yet

Click "Save Current" to save the active harmony palette

▸ Popular Palettes

Summer Vibes

Grayscale Modern

Playful Gradient

Ocean Blues

Golden Sunset

Cherry Red

▸ Color Theory Quick Reference

🎨 Color Formats

HEX: #RRGGBB (web standard)
RGB: Red, Green, Blue (0-255)
HSL: Hue, Saturation, Lightness
CMYK: Print color model

🔄 Color Harmonies

Complementary: Opposite on color wheel
Analogous: Adjacent colors
Triadic: 3 evenly spaced colors
Tetradic: 2 complementary pairs
Monochromatic: Shades of one color

💡 Usage Tips

60-30-10 rule for color distribution
Limit to 3-5 colors per palette
Consider accessibility (WCAG)
Test on different screens

🎯 Common Uses

Web design color schemes
Brand identity development
CSS gradient generation
UI component styling

🎨 What is Color Theory?

Color theory is the art and science of using color effectively. It encompasses the color wheel, color harmonies, and the context in which colors are used. Understanding color theory is essential for designers, developers, and anyone creating visual content.

At its core, color theory explains how humans perceive color and the visual effects of color combinations. The color wheel, developed by Sir Isaac Newton in 1666, organizes colors in a circle showing relationships between primary colors (red, yellow, blue), secondary colors (green, orange, purple), and tertiary colors.

Why color theory matters for developers:

User Experience: Colors influence emotions, readability, and user actions
Accessibility: Proper contrast ratios ensure content is readable for all users
Brand Consistency: Systematic color usage strengthens brand identity
Visual Hierarchy: Strategic color use guides users through interfaces

Modern digital design uses color models like RGB (for screens), HSL (for intuitive color selection), and HEX (for web development). Each serves different purposes in the design workflow.

🛠️ How to Use This Tool

Getting Started

There are multiple ways to select colors:

Color Picker: Click the color picker to choose any color visually
Direct Input: Enter HEX, RGB, HSL, or CMYK values directly
Eyedropper: Pick any color from your screen (Chrome/Edge)
Random: Generate random colors for inspiration
Image Extraction: Upload an image to extract its dominant colors

Building Palettes

Working Palette: Add colors to your working palette (up to 8 colors). Drag to reorder, click to edit, right-click to copy. Use undo/redo for mistakes.

Color Harmonies: Select a base color and explore complementary, analogous, triadic, tetradic, and monochromatic schemes. Click "Load All to Palette" to add an entire harmony.

Shades & Tints: Explore lighter (tints) and darker (shades) variations of your selected color automatically.

Accessibility Features

Contrast Checker: Test text and background color combinations against WCAG 2.1 guidelines. See AA and AAA compliance for normal text, large text, and UI components.

Color Blindness Simulator: Preview how your palette appears to users with different types of color vision deficiency.

Export Options

CSS Variables: Export as ready-to-use CSS custom properties
JSON: Export as a JSON array for programmatic use
PNG: Download your palette as an image swatch

🔒 Privacy First: All processing happens in your browser. Your colors and images never leave your device.

💡 Common Use Cases

Website & App Design

Create cohesive color schemes for web applications. Start with your brand's primary color, then use harmonies to find complementary accent colors. Export as CSS variables for direct use in your stylesheets.

Ensuring Accessibility Compliance

Use the contrast checker before finalizing color choices. WCAG 2.1 requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text. This tool shows compliance for AA and AAA standards instantly.

Brand Color Development

Develop complete brand color systems. Start with a primary brand color, use monochromatic harmony for variations, and complementary harmony for accent colors. Save palettes locally for future reference.

Color Format Conversion

Convert between HEX, RGB, HSL, and CMYK instantly. Designers often receive colors in one format but need another—this tool handles conversions automatically as you work.

Extracting Colors from Inspiration

Upload photos, screenshots, or design inspiration to extract dominant colors. The k-means algorithm identifies the most prominent colors, which you can add directly to your working palette.

Testing for Color Blindness

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Use the simulator to ensure your palette remains distinguishable for users with protanopia, deuteranopia, or tritanopia.

⚡ Tips & Best Practices

The 60-30-10 Rule

A classic interior design principle that works for UI: use your dominant color for 60% of the design, secondary color for 30%, and accent color for 10%. This creates visual balance and hierarchy.

Start with HSL, Not HEX

HSL (Hue, Saturation, Lightness) is more intuitive for creating color variations. Keep the hue constant and adjust saturation/lightness to create consistent shades. This tool shows all formats simultaneously.

Test on Multiple Screens

Colors appear differently on various displays. What looks perfect on your calibrated monitor may appear washed out on a phone. Always test your palette on multiple devices before finalizing.

Use Contrast for Emphasis

High contrast draws attention; low contrast recedes. Use the contrast checker not just for accessibility, but to ensure important UI elements stand out appropriately.

Limit Your Palette

Most successful designs use 3-5 colors maximum. This tool's 8-slot working palette encourages restraint. If you need more colors, consider whether you're over-complicating your design.

Save Palettes for Consistency

Use the save feature to store palettes locally. This ensures consistency across design sessions and makes it easy to share exact colors with team members via export.

❓ Frequently Asked Questions

What's the difference between RGB and HEX?

They represent the same colors differently. HEX (#FF5733) is a compact hexadecimal format popular in CSS. RGB (255, 87, 51) uses decimal values 0-255 for red, green, and blue channels. Both produce identical colors—it's just notation preference.

When should I use HSL vs RGB?

HSL for design, RGB for code. HSL is more intuitive—you can create lighter/darker versions by adjusting lightness, or muted versions by reducing saturation. RGB is better when you need precise channel control or are working with existing RGB values.

What WCAG contrast ratio should I target?

4.5:1 minimum for body text, 7:1 for AAA compliance. Large text (18px+ or 14px+ bold) can use 3:1 minimum. For maximum accessibility, aim for AAA compliance (7:1) when possible.

Why does the eyedropper only work in some browsers?

It's a newer browser API. The EyeDropper API is currently supported in Chrome, Edge, and Opera. Firefox and Safari don't support it yet. The tool gracefully hides the button in unsupported browsers.

How does image color extraction work?

K-means clustering algorithm. The tool samples pixels from your image and groups similar colors together, then returns the center of each cluster as a dominant color. Adjust the slider to extract more or fewer colors.

Are my saved palettes stored in the cloud?

No, they're stored locally. Palettes are saved in your browser's localStorage. They persist across sessions but are specific to your device and browser. Clear browser data and they're gone—consider exporting important palettes.

Can I use these colors commercially?

Absolutely. Colors themselves cannot be copyrighted. Any palette you create here is yours to use for any purpose—personal, commercial, or client work.

COLORS Palette Generator & Converter