TintaColor Studio

Brand palette · WCAG 2.2 contrast · Design tokens

Turn one brand color into a palette that passes contrast.

Enter a client’s brand colors. Tinta builds 50–950 scales, shows which text colors are readable on each swatch, fixes failing pairs and exports code for your project.

Color vision preview

Contrast checker

—

Live preview

Typical vision

Sample cooperative · Member update

Dividends are ready for pickup.

Bring your passbook and one valid ID to the main office. Senior members may claim through an authorized representative.

Check my share See schedule Read the notice

Small print at 12.5px: office hours Monday to Friday, 8:00 AM – 5:00 PM.

Pair finder

Every text step (columns) on every background step (rows). Click a cell to load it into the checker.

Numbers are contrast ratios.Bright cells pass the target in the checker.

Export


  


  
  

    
About this project

    
A palette tool for developers who hand off sites to real clients

    

      

        
The problem

        
Small businesses, cooperatives, schools and LGU offices usually hand a developer one logo color. Stretching that into hover states, backgrounds and text colors by eye often produces gray-on-green text that fails accessibility checks and is hard to read on a cheap phone in sunlight.

        
What Tinta does

        
    
          
  • Builds 11-step tonal scales (50–950) in OKLCH, keeping the client’s exact hex on the closest step.
    • 
          
  • Adds an optional neutral grey tinted toward the brand.
    • 
          
  • Marks each swatch with the text color that passes WCAG AA.
    • 
          
  • Checks any pair against AA, AAA, large text and UI thresholds, and suggests the nearest passing color.
    • 
          
  • Simulates protanopia, deuteranopia, tritanopia and greyscale.
    • 
          
  • Exports CSS variables, a Tailwind config, an SCSS map or W3C design tokens.
    • 
        

      

      

        
Who it’s for

        
Freelance web developers, WordPress theme builders, designers preparing brand guides, and teams that must meet accessibility rules on government or school websites.

        
Tech stack

        
Vanilla JavaScript, HTML and CSS. A pure, tested color engine (color-core.js) does the OKLab math, WCAG ratios and exports. No build step, no dependencies, works offline.

        
Install and deploy

        
Download the repository and open index.html, or host it free on GitHub Pages, Netlify or Cloudflare Pages. Run npm test to check the color engine.

        
Client pitch

        
Offer a “brand color audit” as a fixed-fee add-on: check the client’s current site, deliver a fixed palette and a tokens file for their theme. It also shows clients you take accessibility seriously.

        
GitHub repositoryBuilt by Efraim Ray

      

    

    
Tinta Color Studio v1.0.0 · MIT License · Brand names and colors in the samples are fictional. Contrast follows WCAG 2.2 relative luminance; vision simulation uses Machado et al. (2009).