Color Picker & Converter

Free · No signup · Every format · WCAG accessibility

Color Picker

Nearest CSS name: indigo
Tailwind class: bg-indigo-600
Luminance 0.13
Tip: Type any format — HEX, RGB, HSL, CMYK, or a CSS named color. Press Space for a random color, C to copy HEX, ? for all shortcuts.

Shades & Tints

Lighter tints and darker shades of your current color, like Tailwind's 50-950 scale.

All Formats

#4037e6

History

0

Bookmarks

0
No bookmarks yet

Foreground Color

Click

Background Color

Click

Contrast Ratio

21.0:1
Excellent contrast
Normal Text AA (4.5:1)
PASS
Normal Text AAA (7:1)
PASS
Large Text AA (3:1)
PASS
Large Text AAA (4.5:1)
PASS

Live Preview

16px

The quick brown fox jumps over the lazy dog. 0123456789

Normal text: ≥ 16px regular / 14px bold
Large text: ≥ 24px regular / 18.66px bold
Tip: Click the foreground or background swatch to use your currently picked color from the Picker tab. Use "Swap" to quickly test the reverse combination.

UI Components

Button
Click me
Link
Read more
Icon
Tip: UI components like buttons and icons need at least 3:1 contrast against their background (WCAG 2.1 §1.4.11).

Color Blindness Simulator

See how your current palette looks to people with different types of color vision deficiency.

Tip: About 8% of men (1 in 12) have some form of color vision deficiency. Always test your designs — especially red/green distinctions, status indicators, and data visualizations. Use patterns and labels alongside color.

Palette Through Color Blindness

Generate a palette in the Palette tab first, then come here to see how it appears to color-blind users.

Design tip: If two colors in your palette look identical in any simulation, add a secondary visual cue (icon, pattern, or label) to distinguish them. Never rely on color alone to convey meaning.

Contrast Matrix

See contrast ratios between all colors in your current palette. Generate a palette in the Palette tab, then return here.

Legend: AAA (7:1+)   AA (4.5:1+)   Fail (<4.5:1). Click any cell to load it in the contrast checker above.

Base Color

Tip: Use the 60-30-10 rule for balanced designs — 60% dominant color, 30% secondary, 10% accent. Lock your best colors and regenerate the rest.

Mood Palettes

Generate palettes based on mood and atmosphere. Click a mood, then randomize for variations.

Export as Image

Download your palette as a PNG image for sharing or documentation.

Dark Mode Generator

Auto-generate dark mode equivalents of your palette colors using HSL lightness inversion.

Light Mode
Dark Mode

Color Mixer
#4F46E5
rgb(79, 70, 229)
Tip: Click the result swatch to use the mixed color as your active color. Click Color A/B swatches to load your current color.

Extract from Image

Drop an image here or click to upload

PNG, JPG, WebP, GIF supported

Extracted Colors

Upload an image to extract colors

Extract from Code

Paste any HTML, CSS, or code containing color values. All hex codes, rgb(), and hsl() values will be extracted.

Gradient Builder

Text with gradient:

Your Gradient Text

Tip: CSS gradients work on background, border-image, and even text (with -webkit-background-clip: text).

CSS Code

background: linear-gradient(90deg, #4f46e5, #38bdf8);

Presets

Tip: Click any preset to load it instantly. Modify the colors and angle to make it your own. Gradients with 2-3 stops look cleanest — avoid using more than 4 stops unless creating a rainbow effect.

Controls

UI Preview
Theme:

See how your color looks as a primary in a real UI. Colors are auto-derived from your picked color.

CSS Filter Generator

Generate a CSS filter value that transforms black to your current color. Useful for colorizing SVG/icon images.

Target
Result
Loss -- 
Click "Generate" to compute

Brand Palettes

Create named brand palettes to organize your colors. Click "New Palette" to start.

Need help?

Knowledge Base

Questions & Answers

A HEX color code is a 6-digit hexadecimal number used in web design. It starts with # followed by pairs for red, green, and blue (e.g., #FF5733). Each pair ranges from 00 (none) to FF (maximum). You can also use 3-digit shorthand (#F53) or 8-digit with alpha (#FF573380).

RGB (Red, Green, Blue) is additive and used for screens. CMYK (Cyan, Magenta, Yellow, Key/Black) is subtractive and used for print. Screen colors are made by adding light; print colors are made by absorbing light with ink. Converting between them can cause color shifts.

WCAG contrast ratio measures luminance difference between text and background. A ratio of 4.5:1 is required for normal text (AA), 7:1 for enhanced (AAA). Large text needs 3:1 (AA) and 4.5:1 (AAA). Good contrast ensures readability for people with low vision.

Color harmonies are combinations based on positions on the color wheel. Complementary colors are opposite (180°), analogous are neighbors (30° apart), triadic are evenly spaced (120°), and split-complementary uses the two colors adjacent to the complement. Each creates a different visual mood.

HSL stands for Hue (0-360°), Saturation (0-100%), and Lightness (0-100%). It's more intuitive than RGB for adjusting colors — change hue to shift the color, saturation to make it more vivid or muted, and lightness to make it brighter or darker. CSS natively supports hsl().

The simulator applies scientifically-derived 3x3 color transformation matrices to your RGB values. Each matrix approximates how a specific type of color blindness (protanopia, deuteranopia, tritanopia, achromatopsia) affects color perception. About 8% of men and 0.5% of women have some form of color vision deficiency.

Yes. Upload any image under the Explore tab’s “Extract from Image” section. The tool samples thousands of pixels, groups them into clusters using a median-cut algorithm, and returns the 6 most dominant colors. You can also click anywhere on the image for an eyedropper that picks the exact pixel color.

100% free with no ads, no watermarks, no signup, and no tracking. Everything runs in your browser using JavaScript. No data is sent to any server. Your color history and bookmarks are stored locally in your browser's localStorage.

Learn More

Color Theory & Design Guide

Understanding Color Theory Basics

Color theory is the art and science of using color. It explains how humans perceive color and how colors mix, match, or contrast with each other. Understanding color theory is essential for anyone working in design, whether you're building a website, creating a brand identity, or choosing paint for a room.

The Color Wheel was invented by Sir Isaac Newton in 1666. It organizes colors in a circle, showing relationships between primary colors (red, blue, yellow), secondary colors (green, orange, purple), and tertiary colors. Modern color wheels use either the RGB model (for screens) or RYB model (for traditional art).

Warm vs. Cool Colors: Colors on the red-yellow side of the wheel (red, orange, yellow) are "warm" and evoke energy and urgency. Colors on the blue-green side (blue, green, purple) are "cool" and convey calm and professionalism. Most successful designs use a mix of both.

Color Psychology: Red creates urgency (used in sale signs and CTAs). Blue builds trust (used by banks and tech companies). Green suggests growth and health. Purple implies luxury. Orange is friendly and energetic. Yellow grabs attention but can cause strain in large amounts.

RGB vs. CMYK: When to Use Which

RGB (Red, Green, Blue) is an additive color model used for anything displayed on a screen: websites, apps, social media, video, digital ads. Colors are created by combining light. When all three channels are at maximum (255, 255, 255), you get white. When all are zero, you get black.

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used for print: business cards, brochures, packaging, billboards. Colors are created by absorbing light through ink. When all four inks are at 100%, you get (approximately) black.

Why conversions matter: A color that looks vibrant on screen (#FF0000 bright red) may appear duller in print because CMYK has a smaller gamut. Always preview your designs in CMYK mode before sending to print. This tool converts between both formats instantly.

Pro tip: If you're designing for both web and print, start with CMYK values to ensure print compatibility, then convert to RGB for digital assets. This avoids the disappointment of colors shifting after printing.

WCAG Accessibility: A Complete Guide

The Web Content Accessibility Guidelines (WCAG) are internationally recognized standards that ensure web content is accessible to people with disabilities, including visual impairments. Color contrast is one of the most important — and most commonly violated — requirements.

Contrast Ratios Explained: The contrast ratio compares the relative luminance of two colors on a scale from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability.

WCAG 2.1 Requirements:

  • Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular), 3:1 for UI components and graphical objects
  • Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text

Common mistakes: Light gray text on white backgrounds, colored text on colored backgrounds without checking contrast, placeholder text that's too faint to read, icons without sufficient contrast against their background.

Legal implications: Many countries require WCAG compliance. In the US, the ADA (Americans with Disabilities Act) applies to websites. In the EU, the European Accessibility Act takes effect in 2025. Non-compliance can result in lawsuits and fines.

Color Harmonies: How to Build Beautiful Palettes

Complementary colors sit opposite each other on the wheel (180° apart). They create maximum contrast and visual tension. Great for CTAs and attention-grabbing elements. Example: blue (#2563EB) and orange (#EA580C).

Analogous colors are neighbors on the wheel (30° apart). They create harmony and are pleasing to the eye. Used in nature-inspired designs, backgrounds, and subtle gradients. Example: blue, blue-green, and green.

Triadic colors are evenly spaced at 120° intervals. They create vibrant, balanced compositions. Best when one color dominates and the others accent. Example: red, yellow, and blue.

Split-complementary uses a base color plus the two colors adjacent to its complement. Less tension than true complementary, but still high contrast. Easier to work with for beginners.

Tetradic (square) uses four colors at 90° intervals. Complex and rich, but hard to balance. Best with one dominant color, one secondary, and two accents.

Monochromatic uses variations in lightness and saturation of a single hue. The safest, most cohesive scheme. Excellent for minimalist designs and creating visual hierarchy.

The 60-30-10 Rule: In any palette, use your dominant color for 60% of the space, secondary for 30%, and accent for 10%. This creates visual balance and hierarchy.

Color in Branding: What Top Brands Know

Color increases brand recognition by up to 80% (University of Loyola study). It's the first thing people notice about your brand and the last thing they forget.

Blue is the most popular brand color, used by Facebook, LinkedIn, Twitter, Samsung, Ford, and IBM. It communicates trust, reliability, and professionalism.

Red is used by Coca-Cola, YouTube, Netflix, and Target. It evokes excitement, urgency, and passion. It's the most effective color for call-to-action buttons.

Green is used by Starbucks, Spotify, Whole Foods, and John Deere. It signals growth, nature, health, and money.

Black is used by luxury brands like Chanel, Nike, and Apple. It communicates sophistication, elegance, and authority.

Building a brand palette: Start with one primary brand color, add 1-2 supporting colors, include a neutral (gray or off-white), and define specific hex codes for light and dark variants. Document everything in a brand style guide.

Color for Web Developers: CSS, Tailwind & Design Tokens

CSS Custom Properties (Variables): Modern CSS supports --color-primary: #4f46e5; declared on :root. Variables cascade, can be overridden per component, and work with var(--color-primary). Use this tool's CSS export to generate a complete set of variables from any palette.

HSL in CSS: hsl(243, 76%, 59%) is often better than hex because you can create shade variants by adjusting just the lightness value. This is the foundation of Tailwind's color scale — each shade is the same hue at a different lightness.

Tailwind CSS Color Mapping: Tailwind ships with a curated palette (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) each with 11 shades (50-950). This tool maps your picked color to the nearest Tailwind class.

Design Tokens: In large systems, colors are stored as "design tokens" — platform-agnostic variables. This tool's JSON export creates token-ready output. Tokens can be transformed into CSS, iOS, Android, and other platform formats using tools like Style Dictionary.

Dark Mode: A common pattern is to use CSS variables that swap between themes: --bg: #fff in light mode and --bg: #0f172a in dark mode. Use the Contrast tab to ensure both theme variants meet WCAG requirements.

Understanding Color Blindness & Inclusive Design

Approximately 300 million people worldwide have some form of color vision deficiency. About 8% of men and 0.5% of women are affected. Designing for color blindness isn't optional — it's essential for truly inclusive products.

Protanopia (red-blind): Affects ~1% of males. Red appears as dark brown/green. Red-green distinctions are impossible. Red warning indicators, red text on dark backgrounds, and red/green status lights are problematic.

Deuteranopia (green-blind): The most common type, affecting ~6% of males. Green appears brownish/yellowish. Similar to protanopia in practical impact. Green "success" and red "error" states are indistinguishable.

Tritanopia (blue-blind): Very rare (~0.01%). Blue appears greenish, yellow appears pinkish. Less impactful for most UI designs, but important for data visualizations.

Achromatopsia: Total color blindness — sees only in grayscale. Extremely rare. Test your designs in grayscale to ensure sufficient contrast without relying on hue.

Design tips:

  • Never rely on color alone to convey information — add icons, labels, or patterns
  • Use blue/orange instead of red/green for contrasting states
  • Test with our Simulate tab before finalizing designs
  • Ensure sufficient lightness contrast between adjacent colors
  • Consider using color-blind-safe palettes from the start
Feature Comparison: Free Color Tools

EasyEcommerce (Free)

All features included: color picker, WCAG contrast checker, palette generator, gradient builder, image extraction, color blindness simulator, CMYK conversion, Tailwind mapping, brand organizer, multi-format export. No signup, no ads, no limits.

Coolors

Good palette generator, but contrast checker, gradient builder, image extraction, and export features require paid plan ($3/mo). Shows ads on free tier.

Adobe Color

Excellent color wheel and accessibility tools, but requires Adobe account. No gradient builder. Export limited to ASE format. Part of the Adobe ecosystem.

ColorSpace

Simple palette generator with CSS export. No contrast checker, no gradient builder, no image extraction, no color blindness simulation, no CMYK. Shows ads.

Why This Is the Best Free Color Tool

Most color tools do one thing well — a picker, or a contrast checker, or a palette generator. This tool combines all six features in one place: visual picker, WCAG contrast checker, harmony palette generator, CSS gradient builder, image color extraction, and color blindness simulator.

It's the only free tool that converts between all major formats (HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, CSS named colors, and Tailwind CSS classes) in real time, with one-click copy for every format.

Everything runs 100% in your browser. No server-side processing, no accounts, no tracking. Your colors, palettes, bookmarks, and history are stored locally. No data ever leaves your device.

Built and maintained by Easy Ecommerce Group, a Brooklyn-based growth agency that builds genuinely free tools for the design and marketing community.

CSS Gradients: Linear, Radial, and Conic Explained

Linear gradients transition colors along a straight line. The angle (0°-360°) determines direction: 0° goes bottom-to-top, 90° goes left-to-right, 180° goes top-to-bottom. You can add multiple color stops at specific positions (e.g., linear-gradient(90deg, red 0%, blue 50%, green 100%)).

Radial gradients transition colors outward from a center point. They create circular or elliptical patterns. Great for spotlight effects, glowing elements, and background patterns. Syntax: radial-gradient(circle, #4f46e5, #38bdf8).

Conic gradients transition colors around a center point (like a color wheel). New in CSS — supported in all modern browsers. Perfect for pie charts, color wheels, and artistic effects. Syntax: conic-gradient(from 0deg, red, yellow, green, cyan, blue, magenta, red).

Performance tips:

  • CSS gradients are rendered by the GPU and are resolution-independent — they always look sharp
  • Prefer CSS gradients over gradient images for better performance and scalability
  • Multiple gradients can be stacked: background: linear-gradient(...), radial-gradient(...)
  • Use gradients on border-image for gradient borders
  • Animate gradient position (not stops) for smooth motion: transition background-position
How Image Color Extraction Works

This tool uses the median cut algorithm to extract dominant colors from images. Here's how it works:

  1. Sampling: The image is drawn onto a Canvas element and pixel data is read. To keep performance fast, we sample up to 10,000 pixels evenly distributed across the image.
  2. Color space division: All sampled pixels are placed in a 3D RGB "box." The algorithm finds which color channel (R, G, or B) has the largest range and splits the box at the median value.
  3. Recursive splitting: This process repeats recursively, splitting the box with the largest range each time. With 3 levels of recursion, we get 8 color buckets.
  4. Averaging: Each bucket's pixels are averaged to produce one representative color. The buckets are sorted by pixel count (popularity) and the top 6 are displayed.

The eyedropper feature works differently — it reads the exact pixel value at your click position using Canvas getImageData(). This gives you the precise color of any point in the image.

Use cases: Extract brand colors from a client's logo, find the palette of a photo for social media graphics, or discover the color scheme of a competitor's website by screenshotting it.

Color Format Quick Reference
Format Syntax Example Best For
HEX#RRGGBB#4F46E5CSS, design specs
HEX+Alpha#RRGGBBAA#4F46E580CSS with transparency
RGBrgb(R, G, B)rgb(79, 70, 229)CSS, canvas
RGBArgba(R, G, B, A)rgba(79, 70, 229, 0.5)Overlays, shadows
HSLhsl(H, S%, L%)hsl(243, 76%, 59%)Theme variations
HSLAhsla(H, S%, L%, A)hsla(243, 76%, 59%, 0.8)Tinted overlays
HSV/HSBhsv(H, S%, V%)hsv(243, 69%, 90%)Color pickers, Photoshop
CMYKcmyk(C%, M%, Y%, K%)cmyk(65%, 69%, 0%, 10%)Print design
Tailwindbg-{name}-{shade}bg-indigo-600Tailwind CSS projects