Free business generator

Palette to Design Tokens Converter

Turn your brand colors into ready-to-paste CSS, Tailwind, SCSS, or JSON tokens with light-to-dark shades and text contrast checks.

Instant results
Private in your browser
PDF report included

Colors converted

4

4 colors became CSS variables with 40 shades. Lowest best-case text contrast is 4.63:1.

Colors parsed: 4
Lines skipped: 0
Lowest text contrast: 4.63:1
Shades generated: 40

Transparent breakdown

Code format: CSS variables
Name style: kebab-case
Contrast notes: Included

Text color check
Color	Hex	Best text color	Contrast ratio
primary	#1F6FEB	white	4.63
accent	#F59E0B	black	9.78
ink	#111827	white	17.74
mist	#F3F4F6	black	19.08

Ready to use

Review and make it yours

Edit the draft before publishing or sending it. Your changes stay on this device unless you copy or download them.

Copy-ready draft

/* Design tokens generated 2026-08-22 */
:root {
  --brand-primary: #1F6FEB; /* text: white (4.63:1) */
  --brand-primary-50: #F4F8FE;
  --brand-primary-100: #E9F1FD;
  --brand-primary-200: #C7DBFA;
  --brand-primary-300: #9ABEF6;
  --brand-primary-400: #629AF1;
  --brand-primary-500: #1F6FEB;
  --brand-primary-600: #195BC1;
  --brand-primary-700: #144796;
  --brand-primary-800: #0E336C;
  --brand-primary-900: #092147;
  --brand-accent: #F59E0B; /* text: black (9.78:1) */
  --brand-accent-50: #FFFAF3;
  --brand-accent-100: #FEF5E7;
  --brand-accent-200: #FDE7C2;
  --brand-accent-300: #FBD391;
  --brand-accent-400: #F8BB54;
  --brand-accent-500: #F59E0B;
  --brand-accent-600: #C98209;
  --brand-accent-700: #9D6507;
  --brand-accent-800: #714905;
  --brand-accent-900: #4A2F03;
  --brand-ink: #111827; /* text: white (17.74:1) */
  --brand-ink-50: #F3F3F4;
  --brand-ink-100: #E7E8E9;
  --brand-ink-200: #C4C5C9;
  --brand-ink-300: #94979E;
  --brand-ink-400: #585D68;
  --brand-ink-500: #111827;
  --brand-ink-600: #0E1420;
  --brand-ink-700: #0B0F19;
  --brand-ink-800: #080B12;
  --brand-ink-900: #05070C;
  --brand-mist: #F3F4F6; /* text: black (19.08:1) */
  --brand-mist-50: #FEFEFF;
  --brand-mist-100: #FEFEFE;
  --brand-mist-200: #FCFCFD;
  --brand-mist-300: #FAFAFB;
  --brand-mist-400: #F7F7F9;
  --brand-mist-500: #F3F4F6;
  --brand-mist-600: #C7C8CA;
  --brand-mist-700: #9C9C9D;
  --brand-mist-800: #707071;
  --brand-mist-900: #49494A;
}

117 words · 1460 characters

Use the result well

A clear answer, with the assumptions visible

These recommendations turn the result into an operational next step without hiding the inputs behind a score.

1
Paste the code into your stylesheet or config, then replace any hard-coded hex values with the token names.
2
Every color reaches 4.5:1 with black or white text, so body text on these colors is readable.
3
Use the 50 to 200 shades for backgrounds and chips, 500 for buttons, and 700 to 900 for text on light backgrounds.
4
Keep one name per color across your website, booking page, and print materials so the brand stays consistent.

How this tool works

Read one hex color per line and skip lines that are not valid 3 or 6 digit hex codes.
Build 50 to 900 shades by mixing each color toward white (lighter) and black (darker) in fixed steps.
Calculate WCAG 2 relative luminance and contrast ratios against pure white and pure black to pick the best text color.
Write the tokens in the chosen code format with your chosen name style.

Build it in Bookify

Put your brand on a booking page

Use the same colors and details on your Bookify booking page.

Create a booking page

A clear answer, with the assumptions visible

How this tool works

Put your brand on a booking page

Related free tools