How to Create a Color Scale and Export It to Sketch or Code

A color scale is a set of variants of one hue, running from light to dark, used for hover states, borders, backgrounds, and text in a UI. To build one, pick a base color, choose how many steps you need, generate the ramp, then export it as Sketch styles or code variables. Geenes (geenes.app) is a tool built for exactly this: its own description is "Create a color scale in seconds, then export it to sketch or code." The steps below work with Geenes or any equivalent generator, and the checks at the end apply regardless of which tool you use.

Color scale vs. color palette

These two terms get used interchangeably, but they answer different questions.

A product usually needs both: a palette to define which colors exist, and a scale for each of those colors so you have a light and dark version of every one.

Step 1: Choose the base color and the number of steps

Start from the color you already have — a brand hex, a logo color, or a mid-tone you like.

• Steps: 9 or 10 is the common convention (50 through 900), because it gives you enough range without forcing designers to remember too many tokens. Five steps is enough for a small project.
• Base position: Decide whether your brand color is the middle of the scale or the darkest end. If the brand color is dark, treat it as step 700 or 800 and build lighter steps above it.
• Naming: Number the steps so the direction is unambiguous. Lower numbers = lighter is the widely used convention; pick one and never mix it.

Step 2: Generate the ramp

In Geenes, the workflow is: enter a base color, and the tool produces a scale you can then adjust. The site requires JavaScript to run — without it you only see a loading message, so if the page appears stuck, check that JavaScript is enabled in your browser.

When you adjust the generated scale, three properties matter:

• Lightness should move in roughly even perceptual steps. Even hex steps are not even perceptual steps, which is why the middle of a naive ramp often looks muddy.
• Saturation usually needs to drop at the light end and can rise slightly toward the dark end. Keeping saturation constant is the most common reason a generated scale looks flat.
• Hue can shift a few degrees across the ramp — slightly warmer in the lights, slightly cooler in the darks, or the reverse. This is optional but makes the scale feel more deliberate than a pure lightness ramp.

Expect to hand-tune the lightest two and darkest two steps. Generators are weakest at the extremes, where the color either washes out or turns nearly black.

Step 3: Export to Sketch or code

Geenes states its output targets as Sketch and code. The general shape of the export step:

1. Generate and adjust the scale until the steps look right.
2. Choose the export format — a Sketch file or document for design work, or code for development.
3. In Sketch, the result lands as shared styles or color variables you can apply to layers; in code, it lands as color values you can paste into a variables file, a Sass/SCSS map, or CSS custom properties.
4. Name the exported tokens before you import them, not after. Renaming 10 colors inside Sketch is slower than renaming them once at export.

If you are exporting to CSS, a scale maps naturally onto custom properties:

:root {
  --blue-50:  #eef4ff;
  --blue-100: #d9e6ff;
  --blue-300: #8fb4ff;
  --blue-500: #3b74f2;  /* base */
  --blue-700: #1f47a8;
  --blue-900: #0d2352;
}

The exact hex values will differ — the point is the structure: one hue, numbered steps, base color marked.

Step 4: Check contrast before you ship

A scale that looks good in a swatch row can still be unusable in a real interface. Before exporting, verify:

• Text on light steps: step 50–200 as a background needs a dark text color that clears the WCAG AA contrast ratio of 4.5:1 for body text.
• Light text on dark steps: step 700–900 as a background needs light text at the same ratio.
• Mid steps are the trap. Step 400–600 often fails against both black and white text. Use these for borders, icons, and fills — not for text backgrounds.
• Adjacent steps must be distinguishable. If step 300 and step 400 look identical on a real screen, you have too many steps for the range you chose; drop to 7 or 5.

Test on an actual device, not just in the design tool. Screen calibration and ambient light change how close two steps appear.

Common snags

• The page won't load. Geenes needs JavaScript; a blocked script or an extension can leave you on the loading screen.
• The scale looks gray in the middle. Raise saturation slightly around the middle steps, or reduce the number of steps.
• The dark end is indistinguishable from black. Cap the darkest step above pure black so it still reads as your hue.
• Design and code drift apart. Export once, then treat the exported file as the source of truth. Re-exporting after every tweak is how the two sides stay in sync.