Background
Interactive color studio
Turn one color into a usable web palette
Choose a harmony, project type, and palette size. Then adjust, lock, preview, and copy the colors you need.
New collection
A clear system, not just matching swatches.
Explore the paletteBuilt for practical use
See how background, text, action, surface, and border colors work together.
Tip: lock any color you want to keep before changing the scheme or generating another base.
How the palette is built
Harmony for direction. Roles for real interfaces.
The generator uses established color-wheel relationships, then maps the result to practical interface roles. It is a starting system, not a substitute for testing in your product.
Color harmony
Monochromatic, analogous, complementary, split-complementary, triadic, and tetradic schemes define hue relationships. Lightness and saturation are then adjusted for the selected appearance and project type.
Functional roles
Background, surface, text, primary, accent, and border colors describe where a color is intended to be used. You can edit any generated value without changing the role.
Contrast is a pair, not a color
The contrast panel evaluates the actual foreground and background pairs shown in the preview. WCAG 2.2 uses 4.5:1 for normal text and 3:1 for large text at Level AA.
Read WCAG 2.2 contrast guidanceAccuracy & trust
Built to be useful. Designed to be checked.
We test and review CoreBase tools, formulas, and information to keep them useful and accurate. Occasional inaccuracies or circumstances specific to your situation can still affect a result, so verify important decisions against your own requirements.
Found something that does not look right? Tell us so we can review and improve it.