Color Style Guide

Build semantic UI colors and design tokens from a base color.

Color
#
Koopa Green Shell
Aesthetics
Intensity
Export selections
Developer workflow
Export your complete color system as structured JSON

Koopa Green Shell

Mood: Vibrant / Playful
Aesthetics: Natural - Earthy, desaturated companions, organic.
Intensity: Balanced - Maintains a middle ground between clarity and expression.

Primary colors

These are the main colors for your product's interface. Use them as the foundation for your design.

Primary
Secondary
Accent

Hero palette

Your seed color and its ready-to-use interactive states. Drop these directly into buttons, links, and focused elements.

Seed
Hover
Active
Soft
Muted
Glow

Gradient systems

Curated gradient recipes built from your seed and aesthetic to style hero surfaces, emphasis states, and data visuals.

Hero linear

A directional blend of three color stops for hero backgrounds, CTA bands, and marketing headers.

Gradients
Spots
Start
Mid
End
Soft mesh

Five softly layered tones add atmosphere and depth to page sections and backgrounds.

Gradients
Spots
North
East
South
West
Base
Radial glow

A glow that radiates from the center for button halos, chart highlights, and spotlight effects.

Gradients
Spots
Core
Ring
Outer

Neutral tonal scale

A warm, cool, earthy, or plum-tinted neutral scale that inherits the character of your seed color so backgrounds, surfaces, and darks feel intentionally related.

50
100
200
300
400
500
600
700
800
900

Primary tonal scale

A perceptual 50-900 ramp built from your primary color. Use lighter steps for backgrounds and darker steps for text or icons.

50
100
200
300
400
500
600
700
800
900

Secondary tonal scale

A perceptual 50-900 ramp built from your secondary color. Use lighter steps for backgrounds and darker steps for text or icons.

50
100
200
300
400
500
600
700
800
900

Accent tonal scale

A perceptual 50-900 ramp built from your accent color. Use lighter steps for backgrounds and darker steps for text or icons.

50
100
200
300
400
500
600
700
800
900

Semantic tokens

Core UI tokens with action and status roles in one place, so you can apply colors consistently without jumping between sections.

Foundations

Base tokens for page backgrounds, cards, and subtle separators, now built from the same seed-tinted neutral family.

Background
Surface
Surface elevated
Border subtle
Text

Primary and secondary text tokens for readable content hierarchy.

Primary text
Secondary text
Action

Interactive state tokens for buttons, links, and controls.

Default
Hover
Active
Subtle

Auto theme modes

Ready-to-use light and dark token sets generated from your seed color, aesthetic, and matching neutral family.

Light theme

Default surfaces and text tokens for bright interfaces with seed-aware neutral backgrounds.

Primary
Secondary
Accent
Text primary
Text secondary
Background
Surface
Dark theme

Elevated surfaces and readable text tokens for dark interfaces with coordinated charcoal-style neutrals.

Primary
Secondary
Accent
Text primary
Text secondary
Background
Surface

UI combinations: Feedback

Semantic feedback palettes for alerts, badges, and inline messages.

Success

Success feedback for positive alerts, confirmations, and completed actions.

Solid
Text
Background
Warning

Warning feedback for cautionary alerts, warnings, and important notices.

Solid
Text
Background
Error

Error feedback for critical alerts, errors, and failed actions.

Solid
Text
Background
Info

Informational feedback for neutral alerts, tips, and inline messages.

Solid
Text
Background

Build a semantic color style guide from one base color

Color Style Guide expands a selected HEX color into a broader set of palettes and interface roles. It combines the seed color with a chosen aesthetic and intensity to provide structured starting points for design decisions and documentation.

Build a style guide from a selected color

Enter a HEX value or choose a color. The tool analyzes its hue, saturation, and lightness to suggest suitable aesthetics, then generates the guide around the selected option.

Choose an aesthetic such as Minimal, Editorial, Startup, Luxury, Playful, Cyberpunk, Natural, Apple-like, or Material-inspired, then select Subtle, Balanced, or Vivid intensity. These controls change hue spread, saturation, neutral treatment, and contrast within the generated output.

What the generated style guide contains

The page presents labeled swatches for direct comparison and copying. The generated groups include:

  • A primary, secondary, and accent set; hero states; gradients; and separate primary, neutral, secondary, and accent tonal ramps.
  • Semantic foundation, text, and action colors with labels such as Background, Surface, Primary text, Default, Hover, and Active.
  • Related light- and dark-theme color roles for evaluating two interface modes.
  • Success, warning, error, and information combinations with solid, text, and background values.

UI Theme versus Color Style Guide

UI Theme has a narrow, implementation-friendly purpose: it creates one ten-step tint-and-shade scale labeled 50–900 and offers whole-scale exports.

Color Style Guide explores a wider system of palette families and semantic roles influenced by aesthetic and intensity. Copy swatches individually or export the complete guide as CSS custom properties, structured JSON, SCSS variables and maps, or Tailwind v4 CSS, including scales, semantic colors, gradients, and light and dark themes.

Use UI Theme when a single numbered scale and its export formats are the goal.

Using the generated style guide

Use the output to compare palette direction, name proposed roles, and document a starting color system. Before implementation, review the roles in real components, test foreground/background contrast, and refine the values for the product’s states and content needs.

Your favorite colors,
all in one place

Save colors for later, access them in your personal Library, and export selected colors in the supported formats.

Start with Premium
  • Save colors for later
  • Select saved colors and export the selection
  • Access your saved colors from the Color Library

Subscribe for updates

Get emails about new color tools, product updates, and design inspiration.

You can unsubscribe at any time by clicking the link in the footer of our emails. Privacy Policy
Navigated to Color Style Guide