← Back to Editor

#F9FBED · #58798A · #5DACB3 · #9EBA32 · #282105

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

#F9FBED

Fresh Green · SeaShell · Lemon Cream

HEX
#F9FBED
RGB
rgb(249, 251, 237)
HSL
hsl(69, 64%, 96%)
HSB
hsb(69, 6%, 98%)
CMYK
cmyk(1%, 0%, 6%, 2%)
Oklch
oklch(98.3% 0.018 113.3)

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

#58798A

Slate Blue · SlateGray · Navy Blue

HEX
#58798A
RGB
rgb(88, 121, 138)
HSL
hsl(200, 22%, 44%)
HSB
hsb(200, 36%, 54%)
CMYK
cmyk(36%, 12%, 0%, 46%)
Oklch
oklch(55.7% 0.046 231.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#5DACB3

Slate Blue · CadetBlue · Lake Green

HEX
#5DACB3
RGB
rgb(93, 172, 179)
HSL
hsl(185, 36%, 53%)
HSB
hsb(185, 48%, 70%)
CMYK
cmyk(48%, 4%, 0%, 30%)
Oklch
oklch(69.7% 0.078 203.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#9EBA32

Grass Green · GoldenRod · Olive Green

HEX
#9EBA32
RGB
rgb(158, 186, 50)
HSL
hsl(72, 58%, 46%)
HSB
hsb(72, 73%, 73%)
CMYK
cmyk(15%, 0%, 73%, 27%)
Oklch
oklch(74.3% 0.159 120.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#282105

Ochre · Black · Amber Gold

HEX
#282105
RGB
rgb(40, 33, 5)
HSL
hsl(48, 78%, 9%)
HSB
hsb(48, 88%, 16%)
CMYK
cmyk(0%, 18%, 87%, 84%)
Oklch
oklch(24.9% 0.044 95.2)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9FBED
F0EEFB

Analogous

FBF7EE
F9FBED
F3FBEE

Triadic

F9FBED
EEF9FB
FBEEF9

Split-Comp.

F9FBED
EEF3FB
F7EEFB

Tetradic

F9FBED
EEFBF7
F0EEFB
FBEEF3

Contrast Matrix WCAG 2.1 Contrast

F9FBED
58798A
5DACB3
9EBA32
282105
—
4.4
AA Large
2.5
Fail
2.1
Fail
15.3
AAA
4.4
AA Large
—
1.8
Fail
2.1
Fail
3.4
AA Large
2.5
Fail
1.8
Fail
—
1.2
Fail
6.1
AA
2.1
Fail
2.1
Fail
1.2
Fail
—
7.3
AAA
15.3
AAA
3.4
AA Large
6.1
AA
7.3
AAA
—
White BG
1.0Fail
4.6AA
2.6Fail
2.2Fail
16.0AAA
Black BG
20.0AAA
4.5AA
8.0AAA
9.5AAA
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAF0
666786
7F80B1
AAAA53
25250C

Deuteranopia

FAFAF1
646285
7B75B1
A9A65B
25260D

Tritanopia

F9F3F4
5A8382
61B0B0
9F6D73
281112

Achromatopsia

F9F9F9
717171
959595
A2A2A2
202020

Shades & Tints Shades & Tints

#F9FBED

Dark
Light

#58798A

Dark
Light

#5DACB3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9fbed;
  --color-2: #58798a;
  --color-3: #5dacb3;
  --color-4: #9eba32;
  --color-5: #282105;
}

SCSS

$color-1: #f9fbed;
$color-2: #58798a;
$color-3: #5dacb3;
$color-4: #9eba32;
$color-5: #282105;

TAILWIND

colors: {
  'brand-1': '#f9fbed',
  'brand-2': '#58798a',
  'brand-3': '#5dacb3',
  'brand-4': '#9eba32',
  'brand-5': '#282105',
}

RGB Array

[249, 251, 237], [88, 121, 138], [93, 172, 179], [158, 186, 50], [40, 33, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9FBED, #58798A, #5DACB3, #9EBA32, #282105 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f9fbed; --color-2: #58798a; --color-3: #5dacb3; --color-4: #9eba32; --color-5: #282105. 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. 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