Color Theme Generator
Pick any color and instantly get matching palettes — complementary, analogous, triadic, split-complementary, tetradic, and monochromatic. Includes shades & tints scale and CSS variables export.
Pick a Base Color
RGB
0, 82, 204
HSL
216°, 100%, 40%
Quick presets
Color Harmony Schemes
Two colors opposite on the color wheel — high contrast, bold pairings.
#0052CC
0,82,204
216°,100%,40%
#CC7A00
204,122,0
36°,100%,40%
Shades & Tints
Same hue from lightest to darkest — useful for design system scales.
#E5F0FF
229,240,255
215°,100%,95%
#B3D1FF
179,209,255
216°,100%,85%
#80B3FF
128,179,255
216°,100%,75%
#3385FF
51,133,255
216°,100%,60%
#005CE6
0,92,230
216°,100%,45%
#003D99
0,61,153
216°,100%,30%
#002966
0,41,102
216°,100%,20%
#001433
0,20,51
216°,100%,10%
Framework Export
Export your color scale ready to paste into your project.
@import "tailwindcss";
@theme {
--color-brand-50: #F0F6FF;
--color-brand-100: #DCEAFE;
--color-brand-200: #B4D1FD;
--color-brand-300: #74AAFB;
--color-brand-400: #2E80FA;
--color-brand-500: #065FE5;
--color-brand-600: #054AB3;
--color-brand-700: #033886;
--color-brand-800: #02275E;
--color-brand-900: #02193C;
--color-brand-950: #010E23;
--color-brand: #0052CC;
}Generated scale (11 steps)
All Schemes at a Glance
Complementary
Analogous
Triadic
Split-Complementary
Tetradic
Monochromatic
What is color harmony?
Complementary colors sit opposite on the color wheel and create high contrast. Analogous colors sit adjacent and feel cohesive. Triadic uses three evenly spaced colors for balanced variety. Split-complementary, tetradic, and monochromatic offer further options.
Shades and tints
The 11-step shade/tint scale shows your color from near-black to near-white, useful for generating design tokens or Tailwind config values.
Framework export
Export your palette directly for Tailwind v4, Tailwind v3, Material UI, Chakra UI, shadcn/ui, SCSS variables, or plain CSS custom properties.
How to use
- Enter any hex colour in the input field.
- Browse the six harmony schemes (Complementary, Analogous, Triadic, and more) and the 11-step shade and tint scale.
- Select a framework and copy the generated code for Tailwind, Material UI, shadcn/ui, SCSS, or CSS Variables.
Frequently Asked Questions
- What is color harmony?
- Color harmony refers to colors that look pleasing together based on their positions on the color wheel. Common harmony schemes include complementary (opposite colors), analogous (adjacent colors), triadic (evenly spaced), and monochromatic (same hue, different lightness).
- What is a complementary color?
- A complementary color is the color directly opposite another on the color wheel — 180° away in hue. Complementary pairs create maximum contrast and are used to make designs pop. For example, the complement of blue is orange.
- What is an analogous color scheme?
- An analogous color scheme uses three colors that are adjacent to each other on the color wheel (typically ±30°). These schemes feel harmonious and natural, and are common in nature. They work well for backgrounds and gradients.
- What is a triadic color scheme?
- A triadic scheme uses three colors evenly spaced around the color wheel (120° apart). It creates vibrant, high-contrast palettes that maintain balance. Good for designs that need energy and variety.
- What is a monochromatic color palette?
- A monochromatic palette uses a single hue at different lightness and saturation levels. It looks clean and professional, and is common in minimalist design systems. All colors naturally work together since they share the same underlying hue.
- What are shades and tints?
- Shades are created by adding black to a color (decreasing lightness), making it darker. Tints are created by adding white (increasing lightness), making it lighter. Design systems like Tailwind CSS use numbered scales (100–900) to represent these gradations.