AI TOOL

HUE

HUE

Hue is an AI tool that turns a few words into a full color system. Type a mood like “sunset surf shop” and get 9 color roles, a live preview, and a WCAG contrast check, all in one place.

Hue is an AI tool that turns a few words into a full color system. Type a mood like “sunset surf shop” and get 9 color roles, a live preview, and a WCAG contrast check, all in one place.

Case Study

AI Tool

Accessibility

Design Systems

Web App

MY ROLE

Product Designer.

Designed & built with Claude

TOOLS

Claude · GitHub · Vercel

Claude · GitHub · Vercel

TYPE

Personal Project · Live

Personal Project · Live

Try it live

THE BRIEF

Colors that look good and actually work

Colors that look good and actually work

I was looking for a tool like this for my own work. Most palette generators give you 5 nice colors and that’s it. They don’t tell you which color is for buttons or text, they don’t check if text is readable, and they don’t show the colors on a real layout. I wanted one tool to answer one question: do these colors work together?

I was looking for a tool like this for my own work. Most palette generators give you 5 nice colors and that’s it. They don’t tell you which color is for buttons or text, they don’t check if text is readable, and they don’t show the colors on a real layout. I wanted one tool to answer one question: do these colors work together?

THE GOAL

One tool, one question

One tool, one question

I wanted one place where I could:

  • Generate a palette fast

  • See it on a real layout right away

  • Check accessibility without leaving the page

  • Tweak colors until it’s right

I wanted one place where I could:

  • Generate a palette fast

  • See it on a real layout right away

  • Check accessibility without leaving the page

  • Tweak colors until it’s right

KEY FEATURES

More than 5 nice colors

More than 5 nice colors

Color roles, not just colors

Hue gives you a system with 9 roles: primary, secondary, accent, background, surface, text, and the text that sits on buttons. Same structure as a real design system, so it’s ready to become design tokens.

Hue gives you a system with 9 roles: primary, secondary, accent, background, surface, text, and the text that sits on buttons. Same structure as a real design system, so it’s ready to become design tokens.

Hue gives you a system with 9 roles: primary, secondary, accent, background, surface, text, and the text that sits on buttons. Same structure as a real design system, so it’s ready to become design tokens.

Live preview you can edit

The palette shows up on a small website mockup. Every text is editable. You can type your own brand name and headline and see your real words in those colors.

Live preview you can edit

The palette shows up on a small website mockup. Every text is editable. You can type your own brand name and headline and see your real words in those colors.

The palette shows up on a small website mockup. Every text is editable. You can type your own brand name and headline and see your real words in those colors.

Readability check

The palette shows up on a small website mockup. Every text is editable. You can type your own brand name and headline and see your real words in those colors.

Readability check

Hue tests 5 real pairings, like body text on background and button text on primary. Each row shows the actual text it’s checking, the exact contrast ratio, and AA and AAA badges. When you change a color, the check updates live.

Hue tests 5 real pairings, like body text on background and button text on primary. Each row shows the actual text it’s checking, the exact contrast ratio, and AA and AAA badges. When you change a color, the check updates live.

Edit, reset, save

Edit, reset, save

Click any swatch to copy the hex. Edit colors with a picker or a hex code. Reset if you go too far. Save the palettes you like and come back to them later.

The swatch you’re editing gets a green border, so you always know which color you’re changing.

Click any swatch to copy the hex. Edit colors with a picker or a hex code. Reset if you go too far. Save the palettes you like and come back to them later.

The swatch you’re editing gets a green border, so you always know which color you’re changing.

AI WITH A SAFETY NET

I don't just trust AI

I don't just trust AI

The AI is told to follow contrast rules. But I didn’t want to just trust it. So Hue checks every pairing with real WCAG math and shows you the result.

And it catches real problems. When I generated a “sunset surf shop” palette, the AI picked an orange button with white text at 3.74:1. That fails AA. Hue flagged it right away.

I edited the orange to a slightly darker shade, #C35526. Now it’s 4.52:1 and passes. Almost the same color, but now people can read it.

The AI is told to follow contrast rules. But I didn’t want to just trust it. So Hue checks every pairing with real WCAG math and shows you the result.

And it catches real problems. When I generated a “sunset surf shop” palette, the AI picked an orange button with white text at 3.74:1. That fails AA. Hue flagged it right away.

I edited the orange to a slightly darker shade, #C35526. Now it’s 4.52:1 and passes. Almost the same color, but now people can read it.

Before

After

AI makes the first draft fast. The designer still needs to check the output.

AI makes the first draft fast. The designer still needs to check the output.

WORKING WITH AI

Working with AI, not relying on it

Working with AI, not relying on it

I didn’t ask AI to “make me a palette tool” and call it done. I used it like a teammate. It did the fast work. I made the calls.

I didn’t ask AI to “make me a palette tool” and call it done. I used it like a teammate. It did the fast work. I made the calls.

What AI did

  • Wrote the code


  • Built new versions fast when I asked for changes


  • Generates the first draft of every palette

What I did

  • Defined the problem and what the tool should do


  • Decided which features stay and which go


  • Refined the interface: buttons, layout, spacing, and what goes where


  • Tested every version like a user would


  • Caught what felt wrong and asked for changes


  • Shipped it, and fixed it when the build broke

Hue works the same way I built it. AI gives you a fast first draft. Then you take control: edit any color, change the text, check the contrast, reset if you go too far.

Hue works the same way I built it. AI gives you a fast first draft. Then you take control: edit any color, change the text, check the contrast, reset if you go too far.

DESIGN DECISIONS

What I changed and why

What I changed and why

01

I removed the Harmony feature

I asked AI to add a “harmony” score early on. After testing it, I made the call to remove it. Not every design needs harmony, and it added noise without helping the decision.

02

The Generate button got its own row

At first it sat next to the example tags and looked like one of them. I separated them so the main action is clear.

03

Every color edit has Cancel and Accept

You can explore freely without losing what you had. Reset brings back the AI’s original anytime.

04

Smaller swatches, more preview

I made the swatches compact so the live preview gets more space. Seeing colors in context matters more than big color blocks.

The Generate button sits on its own row, clearly separate from the example tags.

The Generate button sits on its own row, clearly separate from the example tags.

SHIPPING IT

From idea to live product

From idea to live product

I put Hue online with GitHub and Vercel. The API key lives on the server, so it never shows in the browser. There’s also a limit on how many palettes one person can make per minute, so the tool stays safe and cheap to run.

One update broke the build. I read the error, fixed it, and it went live again in minutes. I also added analytics, so I can see real visits.

I put Hue online with GitHub and Vercel. The API key lives on the server, so it never shows in the browser. There’s also a limit on how many palettes one person can make per minute, so the tool stays safe and cheap to run.

One update broke the build. I read the error, fixed it, and it went live again in minutes. I also added analytics, so I can see real visits.

LIVE UPDATES

Shipped as an MVP, improved by using it

Shipped as an MVP, improved by using it

Hue launched as an MVP. It got the job done, so I shipped it. Then I kept using it, and every time something felt wrong, I fixed it.

Hue launched as an MVP. It got the job done, so I shipped it. Then I kept using it, and every time something felt wrong, I fixed it.

October 2026

✓

Added a “Color roles” heading so the swatches match the other sections

✓

The readability check now shows the real text from each part of the preview, so you know exactly which line you’re checking

✓

Fixed long eyebrow text getting cut off in the preview

✓

Palettes can now be renamed, so saved palettes are easy to tell apart

WHAT'S NEXT

Where Hue goes from here

Where Hue goes from here

“Fix it” for failing pairs

Not an auto-fix, because I hate when a tool changes my color to something I don’t like. Hue would suggest a few options, like a darker shade, a different text color, or another color from the palette, and let the designer pick.

Usability testing

Test Hue with other designers to find what I can’t see as the builder.

Export as design tokens

Send a palette straight to Figma Variables and CSS, so it’s ready to use in real projects.

WHAT I LEARNED

What surprised me

I was surprised I couldn’t find a tool like this. Instead of giving up, I built it. And it works better than I expected.

AI is fast, but speed is not enough. The real work is deciding what matters and checking the result. That’s still design.

PREVIOUS PROJECT

TRAINUP BRAND IDENTITY

NEXT PROJECT

CAMIC

WHAT I LEARNED

What surprised me

What surprised me

I was surprised I couldn’t find a tool like this. Instead of giving up, I built it. And it works better than I expected.

I was surprised I couldn’t find a tool like this. Instead of giving up, I built it. And it works better than I expected.

AI is fast, but speed is not enough. The real work is deciding what matters and checking the result. That’s still design.

hello@ivanrojas.design

LinkedIn

Designed & built by Ivan Rojas

© 2026

hello@ivanrojas.design

LinkedIn

Designed & built by Ivan Rojas

© 2026

hello@ivanrojas.design

LinkedIn

Designed & built by Ivan Rojas

© 2026