Web Tools tools.bryantsmith.com

Color & Typography

Color Palette Generator

Start from one seed color and get a coordinated palette built on classic color-harmony rules. Preview it on a real UI, then copy or download CSS variables, JSON tokens, Tailwind colors or a hex list. Everything runs in your browser.

Runs in your browser v1.0.0

Seed & scheme

Analogous

Hex, rgb(), hsl() or a CSS color name.

Presets

How the palette spreads around the color wheel.

5

How many colors the palette contains.

50%

How far the light and dark steps reach.

Palette

live

UI preview
New

Coordinated palette

Preview how these colors read together as a simple card.

Primary action Accent 

                    

                        
                        
                    

                

            

        

    


    

        

            
How it works

        

        

            

                Your seed color is converted to HSL, then rotated around the color wheel using the chosen
                harmony (for example, complementary uses opposite hues while analogous uses nearby hues).
                Each step is also spread across a light-to-dark ladder controlled by Variation,
                so the palette has usable tints and shades. The generated colors are mapped to simple UI
                roles — background, surface, text, primary and accent — and the card above shows
                them working together. Click any swatch to copy its hex. Everything runs in your browser
                — your colors never leave the page.
            

        

    




Related tools
  • Color Shade GeneratorGenerate configurable lighter and darker shade scales from a base color, then copy CSS variables, JSON tokens or Tailwind config.
  • Accessible Palette GeneratorTurn one brand color into an accessible tonal palette whose text, button and muted roles are adjusted to meet a WCAG contrast target.
  • Color MixerMix two colors, then build design-system tints, shades, UI states, palettes and transparency steps with HEX, RGB, HSL and color-mix() output.
  • Font Size Scale GeneratorBuild a modular type scale from a base size and ratio, preview it live, and copy ready-to-use CSS variables.
  • Contrast CheckerCheck foreground and background colors for WCAG AA and AAA contrast pass levels.
  • CSS Text Shadow GeneratorBuild single or layered CSS text shadows with a live preview, then copy production-ready CSS — entirely in your browser.
More Color & Typography tools