Start with one color
Choose a base color from the picker, image picker, color wheel, chart, or color library. Then explore harmonies, shades, tints, tones, and contrast-safe combinations.
Use harmony rules
Analogous, complementary, split complementary, triadic, tetradic, and square palettes provide useful starting points. One color should usually lead while the others support the design.
Export palette values
After the palette feels right, export Hex, RGB, HSL, OKLCH, CSS variables, Tailwind values, or simple code lists for your project.
Related color tools
Use these tools to pick, convert, test, and export the color values described in this guide.
More color guides
Color GuidesPractical guides for HTML color codes, Hex values, RGB, HSL, CSS colors, palettes, web safe colors, and shades.HTML Color CodesLearn how HTML color codes work and copy Hex, RGB, HSL, OKLCH, named colors, and CSS-ready color values.Hex Color CodesA guide to Hex color codes, six-digit #RRGGBB values, shorthand Hex colors, and Hex to RGB conversion.RGB Color CodesUnderstand RGB color codes, convert RGB to Hex, and use rgb() values in CSS.HSL Color CodesLearn HSL color codes, hue angles, saturation, lightness, and how to use hsl() in CSS.CSS Color CodesUse CSS color codes in stylesheets, gradients, borders, shadows, SVG, and interface design.Web Safe ColorsExplore web safe colors, classic browser-safe palettes, Hex values, and modern alternatives.Color Shades GeneratorCreate color shades, tints, tones, and variations from any Hex, RGB, HSL, or OKLCH color.