258 Free Color Tools — Palettes, Gradients & Converts
Extract palettes, generate gradients, and convert color spaces for your creative projects. No signup required.
Color Pickers (12)
Color Picker
Pick any color visually
Eyedropper Tool
Sample a color from anywhere on screen
Screen Color Picker
Pick a color from your screen
Pixel Color Picker
Read the exact color of any pixel
Multi-Color Picker
Pick several colors at once
Color Picker with History
Pick colors and keep a recent history
Color Picker with Favorites
Save your favorite colors as you pick
Color Comparison Tool
Compare two colors side-by-side
Color Stack Viewer
Stack colors and inspect them together
Image Color Picker
Pick colors directly from an image
Webcam Color Picker
Pick colors from a webcam snapshot
Color Preview on Background
Preview a color on any background
Palette Tools (35)
Monochromatic Palette Generator
Variations on a single hue
Analogous Palette Generator
Three neighbouring hues
Complementary Palette Generator
Base color and its complement
Split-Complementary Palette Generator
Base + two neighbours of its complement
Triadic Palette Generator
Three evenly spaced hues
Tetradic Palette Generator
Four colors in a rectangular harmony
Square Harmony Palette
Four colors evenly spaced (90°)
Rectangle Harmony Palette
Two complementary pairs in a rectangle
Random Palette Generator
Roll a fresh random palette
Palette Locker
Lock colors and shuffle the rest
Single Color to Full Palette
Derive a complete palette from one color
5-Color Palette Generator
Generate a 5-color palette
8-Color Palette Generator
Generate an 8-color palette
10-Color Palette Generator
Generate a 10-color palette
Pastel Palette Generator
Generate soft pastel palettes
Neon Palette Generator
Generate vibrant neon palettes
Earth Tone Palette Generator
Generate warm earth-tone palettes
Ocean & Beach Palette Generator
Cool ocean and beach palettes
Forest & Nature Palette Generator
Lush forest and nature palettes
Sunset Palette Generator
Generate warm sunset palettes
Vintage & Retro Palette Generator
Generate vintage retro palettes
Dark Mode Palette Generator
Generate palettes tuned for dark UIs
Light Mode Palette Generator
Generate palettes tuned for light UIs
Corporate Palette Generator
Generate calm, professional palettes
Seasonal Palette Generator
Spring, summer, autumn or winter palettes
Material Palette Generator
Generate Material Design palettes
Tailwind Palette Generator
Generate Tailwind-style 50→900 palettes
Brand Palette Generator
Generate a brand-ready palette
Accessible Palette Generator
Generate WCAG-AA palettes
Color Palette Extractor
Extract a palette from any image
Daily Color Palette Generator
Get a fresh palette every day
Wes Anderson Style Palette
Pastel cinematic Wes Anderson palettes
Palette Importer
Import a palette from JSON or pasted text
Palette Sorter
Sort a palette by hue, lightness or chroma
Palette Comparison
Compare two palettes side by side
Color Accessibility (21)
Contrast Checker
Check contrast ratio between two colors
WCAG 2.1 AA Checker
Pass/fail WCAG 2.1 AA contrast
WCAG 2.1 AAA Checker
Pass/fail WCAG 2.1 AAA contrast
WCAG 3.0 APCA Checker
Preview APCA-style perceptual contrast
Large Text Contrast Checker
Contrast threshold for headings & large text
UI Component Contrast Checker
Non-text contrast for UI elements (3:1)
Focus Indicator Contrast Checker
Check focus ring contrast (3:1)
Accessible Color Pair Finder
Find readable pairs for any base color
Contrast Ratio Calculator
Compute the contrast ratio between two colors
Minimum Contrast Auto-Fixer
Auto-adjust a color to meet a target contrast
Color Blindness Simulator
Simulate common color vision deficiencies
Deuteranopia Simulator
Preview a color as a deuteranopic viewer sees it
Protanopia Simulator
Preview a color as a protanopic viewer sees it
Tritanopia Simulator
Preview a color as a tritanopic viewer sees it
Deuteranomaly Simulator
Simulate partial deuteranomaly
Protanomaly Simulator
Simulate partial protanomaly
Achromatopsia Simulator
Preview a color as a fully color-blind viewer sees it
Color Blind Friendly Color Picker
Pick colors that work for color-blind viewers
Color Blindness Test
Take a quick color blindness test
Text Readability Checker
Check text readability over any color
Palette Accessibility Checker
Check every palette color against white
Color Analysis (27)
Color Name Lookup
Look up the name of any color
Nearest Named Color Finder
Snap any color to the closest CSS name
Color Mood Analyzer
Analyze the mood of any color
Color Psychology Reference
Explore the psychology of any color
Seasonal Color Finder
Find the season a color belongs to
Skin Tone Color Finder
Match a color to a skin tone scale
Relative Luminance Calculator
Compute relative luminance of any color
Perceptual Lightness Calculator
Compute OKLCH perceptual lightness
Color Distance Calculator
Compute perceptual distance between two colors
Color Gamut Checker
Check if a color sits inside common gamuts
Color Temperature Analyzer
Estimate a Kelvin temperature from any color
Color Hierarchy Analyzer
Analyze the hierarchy of a palette
Color Swatch Generator
Generate a printable color swatch
Color Wheel Interactive
Interactive 24-hue color wheel with lightness
Brand Color Extractor
Pull brand colors out of a logo or screenshot
Print Color Accuracy Checker
Estimate how a screen color prints
Color Theory Reference Tool
Quick reference for color theory
Pantone Approximation Tool
Approximate Pantone matches for any color
Color Naming Challenge
Guess the name of random colors
Color Memory Test
Test how well you remember colors
CSS Named Colors Reference
Browse and search the full CSS named-color list
Color Format Validator
Validate any CSS color string
Color Histogram
View RGB histograms for any image
Dominant Color Finder
Find the dominant color of an image
Palette Balance Analyzer
Measure a palette's average lightness and chroma
Visual Weight Analyzer
Rank palette colors by visual weight
Warm vs Cool Analyzer
Classify a color as warm or cool
Manipulation (33)
Color Shades Generator
Generate darker shades of a color
Color Tints Generator
Generate lighter tints of a color
Color Tones Generator
Generate desaturated tones of a color
Color Lighten Tool
Lighten any color by a percentage
Color Darken Tool
Darken any color by a percentage
Saturation Booster
Increase color saturation
Saturation Reducer
Decrease color saturation
Vibrance Adjuster
Adjust the vibrance of any color
Exposure Adjuster
Adjust the exposure of any color
Color Mixer (2 colors)
Mix two colors visually
Color Mixer (3+ colors)
Mix three or more colors together
Color Blend Tool
Blend two colors with adjustable ratio
Color Temperature Adjuster
Shift a color toward warm or cool
Warm to Cool Color Shifter
Shift between warm and cool versions of a color
RGB Channel Adjuster
Adjust R, G, B channels independently
HSL Channel Adjuster
Adjust H, S, L channels independently
Hue Rotator
Rotate the hue of any color
Opacity Calculator
Calculate alpha blending values
Opacity Layering Calculator
Stack semi-transparent colors
Color Inverter
Invert a color to its complementary RGB
Color Replacer
Replace one color with another in an image
Color Complement Finder
Find the complementary color (180° hue)
Color Analogous Finder
Three neighbouring hues for harmony
Color Triadic Finder
Find triadic color harmonies from a base color
Color Tetradic Finder
Find tetradic color harmonies from a base color
Color Monochromatic Finder
Find monochromatic color harmonies from a base color
Image Recolor Tool
Recolor an image with a luminance tint
Additive Color Mixer
Mix two light colors additively
Subtractive Color Mixer
Mix two pigments subtractively
CMYK Channel Mixer
Adjust C, M, Y and K channels independently
Alpha Color Generator
Generate rgba() and 8-digit hex values
Color Variations Generator
Show tints, shades and tones together
Color Shift Generator
Shift hue and preview every variant
Gradient Tools (24)
Linear Gradient Generator
Build linear gradients with control over angle
Radial Gradient Generator
Build radial gradients with shape & position
Conic Gradient Generator
Build conic gradients with center & angle
Hard-Stop Gradient Generator
Build sharp hard-stop gradients
Multi-Stop Gradient Builder
Stack many color stops in one gradient
Gradient Angle Adjuster
Adjust the angle of a linear gradient
Gradient Color Stop Editor
Add, move and tune individual gradient stops
CSS Gradient Animation Generator
Generate animated CSS gradients
Mesh Gradient Generator
Generate multi-blob mesh gradients
SVG Gradient Generator
Generate SVG <linearGradient> markup
Canvas Gradient Generator
Generate gradient code for HTML5 canvas
Gradient Previewer
Preview any CSS gradient instantly
Noise & Grain Texture Generator
Add a noise or grain texture to a gradient
Gradient to CSS Exporter
Export a gradient as ready-to-paste CSS
Gradient Palette Mixer
Generate a discrete palette from a gradient
Gradient Collection Browser
Browse an embedded collection of gradients
Gradient Angle Calculator
Convert between angles and gradient directions
CSS Gradient to Image Exporter
Render a CSS gradient as a downloadable image
Gradient from Image
Extract a gradient from any image
Image Theme Generator
Generate a UI theme from an image
Gradient Interpolator
Interpolate discrete steps between two colors
Text Gradient Generator
Create CSS gradient text
Transparent Gradient Generator
Fade any color to transparent
Gradient Reverser
Reverse the stops of a linear gradient
Design Effects (14)
Glassmorphism Generator
Design frosted-glass CSS surfaces
Neumorphism Generator
Design soft-UI dual-shadow CSS
Shadow Color Generator
Generate harmonious shadow colors
Box Shadow Color Tool
Design CSS box-shadows with custom colors
Text Shadow Color Tool
Design CSS text-shadows with custom colors
Overlay Color Generator
Generate overlay colors for images and video
Duotone Generator
Apply a duotone effect to any image
Color Overlay Generator
Generate CSS color overlays with blend modes
Frosted Glass Generator
Design frosted-glass surfaces
Gradient Overlay Generator
Layer a gradient over an image
Brand Style Guide Generator
Generate a mini brand style guide
Color Swatch PNG Generator
Export a palette as a PNG swatch sheet
CSS Filter Generator
Compose CSS filter() color formulas
CSS Backdrop Filter Generator
Generate backdrop-filter CSS
CSS & Developer Output (23)
CSS HSL Color Generator
Generate CSS hsl() values
CSS RGB Color Generator
Generate CSS rgb() values
CSS HEX Color Generator
Generate CSS HEX color values
CSS Color Formatter
Format any color into a CSS-ready string
CSS Background Color Preview
Preview a background color in CSS
CSS Text Color Preview
Preview a text color in CSS
CSS Color Variables Generator
Generate CSS custom property color variables
CSS Custom Properties Exporter
Export a palette as CSS custom properties
SCSS Variable Generator
Generate SCSS $color variables
LESS Variable Generator
Generate LESS @color variables
CSS-in-JS Color Object Generator
Generate a colors object for styled-components
Design Token Generator
Export a palette as W3C design tokens
Figma Token Generator
Export design tokens for Figma plugins
Style Dictionary Format Generator
Export tokens in Style Dictionary format
Tailwind CSS Color Exporter
Export a palette as Tailwind config
Material UI Color Exporter
Export a palette in Material UI format
Chakra UI Color Exporter
Export a palette for Chakra UI
Shadcn/ui Color Exporter
Export shadcn/ui CSS variables
Bootstrap Color Exporter
Export a palette as Bootstrap colors
Android XML Color Generator
Generate Android colors.xml entries
iOS Swift Color Generator
Generate Swift UIColor declarations
Flutter Color Generator
Generate Dart Color() declarations
CSS Border Color Generator
Design CSS borders with custom colors
Design System References (13)
Tailwind Color Reference
Browse the full Tailwind palette
Material Design Color Reference
Browse the Material Design palette
Bootstrap Color Reference
Browse the Bootstrap theme palette
Ant Design Color Reference
Browse the Ant Design palette
Fluent UI Color Reference
Browse the Microsoft Fluent palette
Chakra UI Color Reference
Browse the Chakra UI palette
Radix Color Reference
Browse the Radix UI palette
Open Color Reference
Browse the Open Color palette
IBM Carbon Color Reference
Browse the IBM Carbon palette
Adobe Spectrum Color Reference
Browse Adobe Spectrum colors
GitHub Primer Color Reference
Browse GitHub Primer colors
Atlassian Design Color Reference
Browse Atlassian Design colors
Web Safe Color Palette
Browse the 216 web-safe colors
Color Data & Export (10)
Color JSON Generator
Generate JSON for any color
Color Token Generator
Generate design tokens for any color
Color Format Converter
Convert a color into every common format
Color CSV Exporter
Export a palette as CSV
Color Array Generator
Generate a JavaScript color array
Color Object Generator
Generate a JavaScript color object
Color Palette JSON Exporter
Export a palette as JSON
Color Palette CSS Exporter
Export a palette as CSS
Color Palette SVG Exporter
Export a palette as an SVG swatch
Color Palette PNG Generator
Export color palettes as high-quality PNG swatch images
Fun & Creative (26)
Random Color Generator
Generate beautiful random colors
Random Accessible Color Generator
Generate accessible random colors
Lucky Color Generator
Roll a single lucky color
Daily Color Generator
Get a fresh color every day
Color of the Year Browser
Browse colors of the year by year
Color Name Generator
Generate a fun name for any color
Flag Color Extractor
Browse the colors of world flags
Brand Color Library
Browse the colors of famous brands
Hair Color Reference
Browse a reference of hair colors
Eye Color Reference
Browse a reference of eye colors
Cultural Color Palettes
Browse palettes from world cultures
RGB Cube Visualizer
Visualize colors in an RGB cube
Hue Circle Interactive
Interactive circular hue picker
Color Blending Art Tool
Blend colors to create art
Color Memory Game
Memorize and match colors
Pastel Color Generator
Generate soft pastel colors
Neon Color Generator
Generate vibrant neon colors
Muted Color Generator
Generate muted, low-saturation colors
Warm Color Generator
Generate warm-tone colors
Cool Color Generator
Generate cool-tone colors
Earth Tone Color Generator
Generate earth-tone colors
Color Matching Game
Match colors to test your eye
Zodiac Color Generator
Get a color palette for your zodiac sign
Birth Month Color Generator
Get a color palette for your birth month
Emotion Color Finder
Find a color palette for an emotion
Lucky Number Color
Turn a lucky number into a palette
Color Theory (20)
Color Harmony Generator
Generate harmonies from any base color
Color Wheel Theory Guide
Learn the color wheel visually
Simultaneous Contrast Visualizer
See how surrounding colors shift perception
Bezold Effect Visualizer
Visualize the Bezold spreading effect
Color Afterimage Tool
Visualize the afterimage of staring at a color
Color Context Simulator
See the same color on different backgrounds
Just Noticeable Difference Calculator
Compute perceptual JND between two colors
Color Rendering Index Reference
Reference for CRI lighting scores
Munsell Color System Reference
Browse the Munsell color system
Natural Color System Reference
Browse the Natural Color System
Pantone to HEX Reference
Approximate Pantone colors in HEX
RAL to HEX Reference
Approximate RAL colors in HEX
Color Gamut Visualizer
Visualize where a color sits in common gamuts
Color Symbolism Reference
Reference for color symbolism worldwide
Color Naming History Tool
Browse the history of color names
Color Trend Analyzer
Analyze the trends in color over time
Color from Text/Mood Tool
Generate a palette from a text mood
Color Blindness Test (Ishihara-style)
Take an Ishihara-style color blindness test
Primary, Secondary & Tertiary Colors
Reference the classic color wheel groups
OKLCH Color Playground
Explore OKLCH lightness, chroma and hue