Material Design Palette
Color Harmonies
Shades & Tints
Gradient Builder
background: linear-gradient(to right, #4f8ef7 0%, #8b5cf6 100%);
Named CSS Colors
Click any to load · Showing 140 standard CSS color names
Saved Colors (0)
Save colors from the left panel to see them here.
🎨 Learn More

Color Theory — Guides & Tips for Designers

Master color theory, accessibility, and professional color workflows. From HEX values to WCAG compliance — everything designers and developers need.

📖 Complete Guide

HEX vs RGB vs HSL — Which Color Format Should You Use?

Designers debate HEX, RGB and HSL constantly. Here's when each format makes sense — and why modern CSS almost always prefers HSL for design work.

HEX (#ff6b35): Best for quick color references, copying from design tools, and static values. Easy to read, universally supported. Downsides: hard to mentally visualize what changing a digit does.

RGB (255, 107, 53): Best when you need to manipulate individual channels or work with opacity in JavaScript. rgb() and rgba() are clear and readable in code.

HSL (16, 100%, 60%): Best for design work. Hue is intuitive (0=red, 120=green, 240=blue). Saturation controls vividness. Lightness controls brightness. Want a lighter version? Just increase L%. This is why CSS custom properties often use HSL.

Modern recommendation: Use HSL for CSS variables and design tokens. Use HEX for static values and design tool exports. Use RGB when you need alpha channel manipulation in JavaScript.

5 min readRead more ↓
📐 Accessibility

WCAG Color Contrast Explained: AA vs AAA and Why It Matters

About 8% of men have color blindness. WCAG guidelines exist to make web content readable for everyone. Here's what contrast ratios mean and how to hit them.

What is contrast ratio? It measures the difference in luminance between text color and background. Ratio 1:1 = identical colors (unreadable). Ratio 21:1 = black on white (maximum contrast).

WCAG AA (minimum): Normal text needs 4.5:1. Large text (18px bold or 24px regular) needs 3:1. This is the legal requirement in many countries and the default standard for most websites.

WCAG AAA (enhanced): Normal text needs 7:1. Large text needs 4.5:1. This level is ideal for critical interfaces like medical, government, or finance applications.

Common mistakes: Light gray text on white (#888 on #fff = 3.5:1 — fails AA). Blue on black can fail. Always test text over image backgrounds where contrast varies. Use this tool's contrast checker with your actual background color.

6 min readRead more ↓
🌈 Design Tips

Color Harmony 101: How to Build Palettes That Always Work

Complementary, analogous, triadic — these aren't just terms. They're formulas for creating color combinations that look professionally designed every time.

Complementary (opposite colors): High contrast, vibrant. Use one as dominant and the other as accent. Example: blue (#4facfe) + orange (#fe8d4f). Great for CTAs and hero sections.

Analogous (adjacent colors): Harmonious and easy on the eyes. Use 3 colors that are 30° apart on the color wheel. Example: blue + blue-purple + purple. Perfect for backgrounds and UI panels.

Triadic (3 colors, 120° apart): Balanced and vibrant. All three colors get equal weight. Use one as primary, one as secondary, one as accent. Requires careful saturation control.

Monochromatic: Same hue, different saturation and brightness. Elegant and sophisticated. Works well for professional/luxury brands. Add a single accent color for contrast.

5 min readRead more ↓
💼 For Devs

CSS Color Variables: The Right Way to Build a Design System

Hard-coding color values throughout your CSS is a maintainability nightmare. Here's how to use CSS custom properties to build a scalable color system.

The problem with raw hex values: If you use #4f8ef7 in 50 places and need to change your brand blue, you have 50 changes to make. With a variable, you change it once.

The right structure: Define semantic tokens, not just color names. Bad: --blue: #4f8ef7. Good: --color-primary: #4f8ef7; --color-button-bg: var(--color-primary). Semantic names survive brand color changes.

HSL-based color variables: Define hue, saturation and lightness separately. --hue: 220; --color-primary: hsl(var(--hue), 90%, 60%); --color-primary-light: hsl(var(--hue), 90%, 75%); --color-primary-dark: hsl(var(--hue), 90%, 40%); — changing --hue transforms your entire palette.

Dark mode: Override variables in @media(prefers-color-scheme:dark) or a .dark class. Only the values change — all your component styles stay the same. Use this Color Picker's CSS output as a starting point.

5 min readRead more ↓
🖌 Advanced

How to Create Beautiful CSS Gradients (Beyond Basic Linear)

Most developers stick to simple linear gradients. But radial, conic and mesh gradients can transform a bland background into a stunning design element.

Linear gradient best practices: Use 3+ color stops for richer gradients. Add slight opacity variations. Rotate by 135deg instead of to right for more dynamic feel. Avoid pure black (#000) in gradients — use very dark saturated versions of your hue.

Radial gradients: Perfect for spotlight effects, glowing buttons, hero backgrounds. radial-gradient(circle at 30% 40%, #4facfe, #03050a) creates a "light source" effect in the upper left.

Conic gradients: Used for pie charts, color wheels, progress rings. conic-gradient(from 0deg, red, yellow, green, blue, red) creates a full spectrum wheel.

Noise gradients: Combine a gradient with an SVG noise filter using background-image with multiple layers for a modern glassmorphism effect. Many modern landing pages use this technique.

4 min readRead more ↓
🧠 Color Science

What Are Web-Safe Colors and Do They Still Matter in 2026?

Web-safe colors were 216 colors guaranteed to display correctly on all screens in the 90s. With modern displays everywhere, are they still relevant? The answer might surprise you.

What are web-safe colors? In the 1990s, most monitors could only display 256 colors. Web-safe colors were the 216 colors (from 0, 51, 102, 153, 204, 255 for each channel) that displayed consistently across Windows, Mac and Linux systems.

Do they matter today? For modern web design — no. Every device since 2000 has supported 16+ million colors. However, they still appear in legacy style guides, some email clients, and embedded systems.

When to care about web-safe colors: Email marketing (some old email clients have limited color support), embedded systems, LED displays, and when creating graphics for devices with limited color gamuts.

The bigger issue today: Wide color gamut displays (P3, Rec. 2020) can display colors beyond sRGB. CSS now supports Display P3 colors with color(display-p3 R G B). This is the new "web-safe" consideration for 2026 onwards.

4 min readRead more ↓

Frequently Asked Questions

Everything you need to know about the Color Picker tool.

Enter your HEX code in the HEX input field at the top of the left panel. The tool instantly shows the equivalent RGB, HSL, HSB and CMYK values. Click the RGB tab to see the rgb() value, then click Copy RGB to copy it. For example, #4f8ef7 converts to RGB(79, 142, 247).
Color harmony refers to colors that look visually pleasing together based on their positions on the color wheel. This tool generates 6 harmony types: Complementary (opposite, high contrast), Analogous (adjacent, soothing), Triadic (3 equally spaced, vibrant), Tetradic (4 colors, balanced), Split-Complementary (base + two adjacent complements), and Monochromatic (same hue, different brightness).
WCAG (Web Content Accessibility Guidelines) contrast ratio measures how readable text is against its background. AA standard requires 4.5:1 for normal text and 3:1 for large text (18px bold or 24px). AAA requires 7:1 for normal text. Poor contrast is the most common accessibility failure on websites. Enter any background color in the Contrast Checker field to test your current color against it.
Click the Eyedropper button in the left panel. Your cursor changes to a color picker. Click anywhere on your screen — any window, image, or webpage — to pick that color. The tool instantly loads the color with all its values. Note: requires a Chromium-based browser (Chrome, Edge, Brave, Opera). Not available in Firefox or Safari due to browser API limitations.
Both use Hue (0-360°) and Saturation (0-100%). The difference is the third value: HSL uses Lightness — at 100% you get pure white, at 50% you get the pure color. HSB/HSV uses Brightness/Value — at 100% you get the pure color, and white is achieved by reducing saturation to 0. HSL is used in CSS (hsl() function). HSB is used in Photoshop, Figma and Illustrator color pickers.
Scroll to the Gradient Builder section in the center panel. Pick your first color with the color picker, then click a gradient stop's color square to set it to your current color. Choose gradient type (linear, radial, conic) and direction from the dropdowns. Click Add Stop to add more color stops. The CSS code updates in real time. Click Copy CSS to copy the full background property.
🌈CSS Gradient Generator 🎨Color Palette Generator ⚙️CSS Minifier 🌐HTML Viewer 💻JSON Formatter 🔍Regex Tester 🔑Image to Base64 📄Markdown Editor