Colors
Popular framework color palettes — click to explore.
Bootstrap 4
v4.6 · 29 colors
Bootstrap 5
v5.3 · 32 colors
Flat UI
Flat · 280 colors
Material CSS
v1.0 · 41 colors
MDBootstrap 5
v9.3 · 42 colors
Tailwind CSS
v3 · 34 colors
Ant Design
v5 · 38 colors
Chakra UI
v3.36 · 44 colors
DaisyUI
v5.7 · 26 colors
NativeBase
v3.4 · 31 colors
HeroUI
v3.2 · 26 colors
Naive UI
v2.44 · 30 colors
Tachyons
v4.12 · 24 colors
Foundation
v6.9 · 18 colors
UIKit
v3.25 · 23 colors
Bulma
v1.0 · 26 colors
Semantic UI
v2.5 · 23 colors
Milligram
v1.4 · 21 colors
Spectre.css
v0.5 · 21 colors
Tools
Handy online tools to boost your workflow.
Color Code Converter
Quickly convert between HEX, RGB, RGBA, HSL and HSLA color formats — runs in your browser, no upload.
CSS Gradient Generator
Build linear & radial gradients, copy ready-to-use CSS code for your website.
WCAG Contrast Checker
Test text & background color contrast to meet web accessibility standards.
Image Color Picker
Upload an image and extract its full color palette — all processing runs locally in your browser.
Random Color Palette Generator
Generate harmonious UI color schemes and lock your favorite colors while regenerating the rest.
Palette Export Tool
Export color palette to SCSS variables, JSON object and native CSS vars.
Dark & Light Theme Tester
Preview light and dark UI palettes side-by-side and export ready-to-use CSS variables for dual themes.
Color Name Finder
Match official CSS named colors from a HEX or RGB value, or reverse-search a color name to get its code.
Guides
Practical tutorials on color theory, accessibility and front-end color tools.
Accessibility
How to Check Color Contrast for WCAG 2.1
A step-by-step guide to testing your text and background colors against AA and AAA standards.
DesignHow to Build a Dark & Light Theme with CSS Variables
Learn how to structure CSS custom properties to support dual themes without duplicating code.
ToolHow to Use the Image Color Picker to Extract UI Palettes
Extract harmonious color palettes from any local image using K-means clustering.
DevConverting HEX to RGB, HSL and HSLA – A Complete Guide
Understand the math behind color conversion and when to use each format in CSS.
DesignGenerating Random Color Palettes for UI Projects
How to use the Random Palette Generator to create cohesive brand colors quickly.