Web Tools tools.bryantsmith.com

Color & Typography

Accessible Palette Generator

Start from one brand color, pick a WCAG contrast target, and get a tonal palette plus UI roles whose text and buttons are nudged until they pass. Preview it, then copy or download the tokens. Everything runs in your browser.

Runs in your browser v1.0.0

Setup

#4f46e5

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

Presets

Text and button roles are nudged until they meet this ratio.

What the shades and text are measured against.

6

How many steps the light-to-dark ramp contains.

Accessible palette

AA 4.5:1

UI roles

Preview

AA

Accessible by design

Body copy, buttons and muted text all meet the selected contrast target.

Primary action Muted link 


                    

                        
                        
                    

                

            

        

    


    

        

            
How it works

        

        

            

                Your brand color is converted to HSL and spread across a light-to-dark tonal ramp. Each
                shade is measured against the chosen background with the WCAG relative-luminance formula,
                so you can see exactly which steps pass your target. The UI roles go a step further:
                text, muted text and button colors are nudged in lightness until their contrast ratio
                meets the target, then shown on a live preview. Click any shade to copy its hex, switch
                the output format, and copy or download the tokens. Everything runs in your browser
                — your colors never leave the page.
            

        

    




Related tools
  • Color Palette GeneratorTurn one seed color into a coordinated color-harmony palette, then copy it as CSS variables, JSON tokens, Tailwind colors or a hex list.
  • Color Shade GeneratorGenerate configurable lighter and darker shade scales from a base color, then copy CSS variables, JSON tokens or Tailwind config.
  • Font Size Scale GeneratorBuild a modular type scale from a base size and ratio, preview it live, and copy ready-to-use CSS variables.
  • Color MixerMix two colors, then build design-system tints, shades, UI states, palettes and transparency steps with HEX, RGB, HSL and color-mix() output.
  • 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