Color Palette

Colour Palette Generator

Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.

Workflow

Step 1: Get the Brand Hex

Ask for the primary brand colour. A single hex like #0D9488 is enough.

Step 2: Generate 11-Shade Scale

Convert hex to HSL, then generate shades by varying lightness while keeping hue constant.

Hex to HSL Conversion

function hexToHSL(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;

  let l = (max + min) / 2;
  let s = 0;
  if (diff !== 0) {
    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
  }

  let h = 0;
  if (diff !== 0) {
    if (max === r) h = ((g - b) / diff + (g =18px or >=14px bold) | 3:1 | 4.5:1 |
| UI components (buttons, borders) | 3:1 | Not defined |
| Graphical objects (icons, charts) | 3:1 | Not defined |

Target AA for most projects, AAA for high-accessibility needs (government, healthcare).

#### Luminance and Contrast Formulas

```javascript
function getLuminance(hex) {
  hex = hex.replace(/^#/, '');
  const r = parseInt(hex.substring(0, 2), 16) / 255;
  const g = parseInt(hex.substring(2, 4), 16) / 255;
  const b = parseInt(hex.substring(4, 6), 16) / 255;
  const rsRGB = r Click me

// Secondary button
Cancel

// Card

  Title
  Description

// Input

---

Common Adjustments

• Too vibrant at light shades: Reduce saturation by 10-20%
• Poor contrast on primary: Use shade 700+ for text
• Dark mode too dark: Use shade 900 instead of 950 for backgrounds
• Brand colour too light/dark: Adjust to shade 500-600 range
• Dark mode looks washed out: Use shade 500 for primary (brighter than light mode's 600)
• Pure white text too harsh in dark mode: Use shade 50 (off-white) instead
• Dark mode muted text fails contrast: Use more extreme shades (300 on 900 instead of 400 on 800)

Brand Identity Adjustments

• Conservative brands (finance, law): Use primary-700 for buttons, reduce saturation in light shades
• Vibrant brands (creative, tech): Use primary-500-600, keep full saturation
• Minimal brands (design, architecture): Use primary sparingly, emphasise muted tones, subtle borders (primary-100)

---

Verification Checklist

• [ ] Body text: >=4.5:1 (normal) or >=3:1 (large)
• [ ] Primary button text: >=4.5:1
• [ ] Secondary button text: >=4.5:1
• [ ] Muted text: >=4.5:1
• [ ] Links: >=4.5:1 (or underlined)
• [ ] UI elements (borders): >=3:1
• [ ] Focus indicators: >=3:1
• [ ] Error text: >=4.5:1
• [ ] Dark mode: All above checks pass
• [ ] Every background has a foreground pair
• [ ] Brand colour recognisable in both modes
• [ ] Borders visible but not harsh
• [ ] Cards/sections have clear boundaries

Test both modes before shipping.

---

Optional References

• Online contrast checkers: WebAIM (webaim.org/resources/contrastchecker), Coolors (coolors.co/contrast-checker), Accessible Colors (accessible-colors.com)
• CI/CD contrast tests: Use getContrastRatio() in test suites to assert minimum ratios for all token pairs
• Transparent/gradient edge cases: For colours with opacity, calculate against final rendered colour. For gradients, check both endpoints.
• OLED dark mode: Use @media (prefers-contrast: high) with #000000 background for battery savings on AMOLED screens
• Multi-colour palettes: Generate separate shade scales for each brand colour, map to different semantic roles (primary, accent)
• Palette visualisation tools: coolors.co, paletton.com, Figma swatches
• assets/tailwind-colors.css — Complete CSS output template

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jezweb
• Source: jezweb/claude-skills
• License: MIT
• Homepage: https://jezweb.com.au

Install and usage instructions live in the source repository linked above.