← Back to Editor

#484848 · #A89078 · #F0F0D8 · #609090 · #90A890

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#484848

Dark Cyan · DarkSlateGray · Charcoal

HEX
#484848
RGB
rgb(72, 72, 72)
HSL
hsl(0, 0%, 28%)
HSB
hsb(0, 0%, 28%)
CMYK
cmyk(0%, 0%, 0%, 72%)
Oklch
oklch(40.2% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#A89078

Ginger · Gray · Warm Sun

HEX
#A89078
RGB
rgb(168, 144, 120)
HSL
hsl(30, 22%, 56%)
HSB
hsb(30, 29%, 66%)
CMYK
cmyk(0%, 14%, 29%, 34%)
Oklch
oklch(66.9% 0.045 66.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#F0F0D8

Fresh Green · Beige · Lemon Cream

HEX
#F0F0D8
RGB
rgb(240, 240, 216)
HSL
hsl(60, 44%, 89%)
HSB
hsb(60, 10%, 94%)
CMYK
cmyk(0%, 0%, 10%, 6%)
Oklch
oklch(94.9% 0.032 107.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#609090

Slate Blue · CadetBlue · Mint Ice

HEX
#609090
RGB
rgb(96, 144, 144)
HSL
hsl(180, 20%, 47%)
HSB
hsb(180, 33%, 56%)
CMYK
cmyk(33%, 0%, 0%, 44%)
Oklch
oklch(61.9% 0.052 195.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#90A890

Celadon · DarkSeaGreen · Apple Green

HEX
#90A890
RGB
rgb(144, 168, 144)
HSL
hsl(120, 12%, 61%)
HSB
hsb(120, 14%, 66%)
CMYK
cmyk(14%, 0%, 14%, 34%)
Oklch
oklch(70.6% 0.044 145.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

484848
474747

Analogous

474747
484848
474747

Triadic

484848
474747
474747

Split-Comp.

484848
474747
474747

Tetradic

484848
474747
474747
474747

Contrast Matrix WCAG 2.1 Contrast

484848
A89078
F0F0D8
609090
90A890
—
3.0
AA Large
7.9
AAA
2.6
Fail
3.6
AA Large
3.0
AA Large
—
2.6
Fail
1.2
Fail
1.2
Fail
7.9
AAA
2.6
Fail
—
3.1
AA Large
2.2
Fail
2.6
Fail
1.2
Fail
3.1
AA Large
—
1.4
Fail
3.6
AA Large
1.2
Fail
2.2
Fail
1.4
Fail
—
White BG
9.1AAA
3.0AA Large
1.2Fail
3.6AA Large
2.6Fail
Black BG
2.3Fail
6.9AA
18.2AAA
5.9AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

484848
9E9D7E
F0F0DE
757590
9A9B96

Deuteranopia

484848
9FA17F
F0F0DF
726E90
999797

Tritanopia

484848
A78283
F0E2E3
629090
919A9B

Achromatopsia

484848
949494
EDEDED
828282
9E9E9E

Shades & Tints Shades & Tints

#484848

Dark
Light

#A89078

Dark
Light

#F0F0D8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #484848;
  --color-2: #a89078;
  --color-3: #f0f0d8;
  --color-4: #609090;
  --color-5: #90a890;
}

SCSS

$color-1: #484848;
$color-2: #a89078;
$color-3: #f0f0d8;
$color-4: #609090;
$color-5: #90a890;

TAILWIND

colors: {
  'brand-1': '#484848',
  'brand-2': '#a89078',
  'brand-3': '#f0f0d8',
  'brand-4': '#609090',
  'brand-5': '#90a890',
}

RGB Array

[72, 72, 72], [168, 144, 120], [240, 240, 216], [96, 144, 144], [144, 168, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #484848, #A89078, #F0F0D8, #609090, #90A890 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #484848; --color-2: #a89078; --color-3: #f0f0d8; --color-4: #609090; --color-5: #90a890. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color