Build beautiful, versatile color schemes for the web
Color Wheel
Select harmonious colors
Explore the relationships between your colors on the color wheel. Adjust the brightness and vividness of the colors all at once to find the right combination of colors.
- Try out complementary, analagous, or tetradic color combinations, and more.
- Add the colors you find to your color palette.
- Use OKLCH color to achieve perceptually equal lightness and chroma.
- Optionally include desaturated neutral tones for backgrounds and text.
Shade Generator
Build shades and tints
See the full spectrum of your colors in 16 different shades each.
- Modify each color individually to fine-tune your palette.
- Select semantic values for common background and text colors.
- Confirm the contrast meets WCAG guidelines.
Theme Preview
See your palette in action
Check how your selected colors work together in a full page context, with several pre-build UI widgets. Get an idea how your final palette feels in a real-world scenario.
- See examples using your selected semantic values.
- Preview monochrome examples for each of your palette colors.
- Hover over elements to see the exact color variables used.
Export
Download your CSS
Once you’re happy with your colors, download all of them as CSS custom properties.
- Select any CSS color format.
- Includes the semantic values you selected in the Shade Generator.
- Edit and use however you wish!
