GFS Design System — Color Palette Generator

01 Color Palette Generator Interactive tools for generating harmonious GFS color palettes

All color math is performed in HSL color space for accurate harmony calculations. Pick any GFS brand color as a base, then explore monochromatic, analogous, complementary, triadic, and split-complementary harmonies. Every generated swatch is click-to-copy.

GFS Brand Colors

■ Click any swatch throughout this page to copy its hex value to clipboard

02 Palette Generator Five harmonious palettes from any GFS base color

Base Color

■ Harmonies computed via HSL hue rotation — Monochromatic, Analogous, Complementary, Triadic, Split-complementary

03 Tint & Shade Generator 10 tints and 10 shades for UI states — hover, active, disabled

Source Color

■ Tints mix toward white, shades mix toward black — 10 steps each at even intervals

04 Gradient Builder CSS gradients from two GFS colors — linear, radial, conic

Color A

Color B

Linear

Radial

Conic

Angle 135

■ Click the CSS box to copy — gradient applied to button, card header, hero background, and text

05 Color Blindness Simulator Preview palettes under four vision deficiency types

Palette Source

■ Simulated via color matrix transforms — Protanopia, Deuteranopia, Tritanopia, Achromatopsia

06 Palette Presets 8 pre-built GFS palettes for common use cases

■ Click any preset to load its colors into the Tint & Shade generator above