Citrus Lime#CBE61E
Graphite Shell#3A3A3A
Soft Surface#F4F1E8
Mossed Steel#8F9766
Slate Relay#66707A
Palette direction

Citrus Lime Graphite Color Palette

A grounded graphite-and-white system with a vivid citrus-lime accent, inspired by the laptop image's dark keyboard, pale surface, and high-visibility yellow detail. The palette feels practical and modern, with enough brightness to signal activity without losing the disciplined, tech-forward base.

MonochromaticTechtechlaptopmodernhigh-contrast
palette-preview.example
Tech color direction

Citrus Lime Graphite Color Palette

A grounded graphite-and-white system with a vivid citrus-lime accent, inspired by the laptop image's dark keyboard, pale surface, and high-visibility yellow detail. The palette feels practical and modern, with enough brightness to signal activity without losing the disciplined, tech-forward base.

Explore the color system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Near Black #111111on Soft Surface #F4F1E816.7:1 Excellent
Logo Near Black #111111on Citrus Lime #CBE61E13.4:1 Excellent
Logo Pure White #FFFFFFon Graphite Shell #3A3A3A11.4:1 Excellent
Logo Near Black #111111on Porcelain Gray #E7E4DD14.9:1 Excellent
Icon color
BackgroundCitrus Lime#CBE61ETextNear Black#111111
Primary Button13.38:1
AAA

Best for the main action users should notice first.

BackgroundGraphite Shell#3A3A3ATextPure White#FFFFFF
Secondary Button11.37:1
AAA

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextSoft Surface#F4F1E8
Outlined Button1.13:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextGraphite Shell#3A3A3A
Text Button11.37:1
AAA

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsMonochromatic color relationship
9:41Citrus Lime Graphite Color Palette Color role balance
Monochromatic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CCitrus Lime Graphite Color PaletteTech brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors combine a vivid citrus-lime with deep graphite and a pale warm surface tone, creating a recognizable system that feels precise, energetic, and grounded. The contrast between the bright accent and the darker structural colors

Clear roles create a consistent brand experience.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Citrus Lime #CBE61E
HeadlineUsed for main titles and key messages.Soft Surface #F4F1E8
LinkUsed for links and interactive text.Graphite Shell #3A3A3A

Buttons

Primary Button
BackgroundCitrus Lime #CBE61E
TextNear Black #111111
Secondary Button
BackgroundGraphite Shell #3A3A3A
TextPure White #FFFFFF
Outlined Button
BackgroundSoft Surface #F4F1E8
TextSoft Surface #F4F1E8

Interface

TextDefault readable body text.Near Black #111111
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Near Black #111111
IconSmall interface icons and marks.Mossed Steel #8F9766
BorderCards, inputs, and component borders.Mossed Steel #8F9766
DividerSubtle separators between content.Slate Relay #66707A
OutlineFocus rings and emphasis outlines.Slate Relay #66707A

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The main colors combine a vivid citrus-lime with deep graphite and a pale warm surface tone, creating a recognizable system that feels precise, energetic, and grounded. The contrast between the bright accent and the darker structural colors

PrimaryCitrus Lime

RolesLogo, Btn Primary Bg

A sharp, high-visibility accent that gives the brand immediate recognition and a sense of active momentum.

HEX#CBE61E
RGB203, 230, 30
HSL68, 80, 51
CMYK12, 0, 87, 10
SecondaryGraphite Shell

RolesLink, Btn Secondary Bg

A durable dark anchor that keeps the system disciplined and makes interface elements feel dependable.

HEX#3A3A3A
RGB58, 58, 58
HSL0, 0, 23
CMYK0, 0, 0, 77
TertiarySoft Surface

RolesBtn Outlined Border, Btn Outlined Text, Headline

A light, understated base tone that softens the palette and supports clear, modern presentation.

HEX#F4F1E8
RGB244, 241, 232
HSL45, 35, 93
CMYK0, 1, 5, 4

Support Colors

The support colors extend the palette with restrained tonal depth, adding subtle separation and interface utility without competing with the citrus-lime focal point.

Mossed Steel

RolesIcon, Border

A muted yellow-green bridge that echoes the accent while staying quiet enough for functional UI details.

HEX#8F9766
RGB143, 151, 102
HSL70, 19, 50
CMYK5, 0, 32, 41
Slate Relay

RolesDivider, Outline

A cool mid-slate that adds structure and separation where a softer, less dominant line is needed.

HEX#66707A
RGB102, 112, 122
HSL210, 9, 44
CMYK16, 8, 0, 52

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Pure White

RolesBg Light, Btn Secondary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Porcelain Gray
HEX#E7E4DD
RGB231, 228, 221
HSL42, 17, 89
CMYK0, 1, 4, 9
Near Black

RolesBg Dark, Text, Btn Primary Text

HEX#111111
RGB17, 17, 17
HSL0, 0, 7
CMYK0, 0, 0, 93

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.

Use when: you need the actual colors.
:root {
  --color-citrus-lime: #CBE61E;
  --color-graphite-shell: #3A3A3A;
  --color-soft-surface: #F4F1E8;
  --color-mossed-steel: #8F9766;
  --color-slate-relay: #66707A;
  --color-pure-white: #FFFFFF;
  --color-porcelain-gray: #E7E4DD;
  --color-near-black: #111111;
}

Role tokens

Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.

Use when: you need UI roles, not just swatches.
:root {
  --role-logo: #CBE61E;
  --role-btn-primary-bg: #CBE61E;
  --role-link: #3A3A3A;
  --role-btn-secondary-bg: #3A3A3A;
  --role-btn-outlined-border: #F4F1E8;
  --role-btn-outlined-text: #F4F1E8;
  --role-headline: #F4F1E8;
  --role-icon: #8F9766;
  --role-border: #8F9766;
  --role-divider: #66707A;
  --role-outline: #66707A;
  --role-bg-light: #FFFFFF;
  --role-btn-secondary-text: #FFFFFF;
  --role-bg-dark: #111111;
  --role-text: #111111;
  --role-btn-primary-text: #111111;
}

JSON

Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.

Use when: a developer or app needs data.
{
    "citrus-lime": "#CBE61E",
    "graphite-shell": "#3A3A3A",
    "soft-surface": "#F4F1E8",
    "mossed-steel": "#8F9766",
    "slate-relay": "#66707A",
    "pure-white": "#FFFFFF",
    "porcelain-gray": "#E7E4DD",
    "near-black": "#111111"
}
Press Space to load new palette