← Back to Editor

#2F4E5B · #FD053F · #FFFFFF · #01AF08 · #A8A481

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

#2F4E5B

Slate Blue · DarkSlateGray · Mint Ice

HEX
#2F4E5B
RGB
rgb(47, 78, 91)
HSL
hsl(198, 32%, 27%)
HSB
hsb(198, 48%, 36%)
CMYK
cmyk(48%, 14%, 0%, 64%)
Oklch
oklch(40.5% 0.043 226.5)

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

#FD053F

Vermilion · Crimson · Passion Red

HEX
#FD053F
RGB
rgb(253, 5, 63)
HSL
hsl(346, 98%, 51%)
HSB
hsb(346, 98%, 99%)
CMYK
cmyk(0%, 98%, 75%, 1%)
Oklch
oklch(62.9% 0.252 21.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#01AF08

Pine Green · Green · Forest Green

HEX
#01AF08
RGB
rgb(1, 175, 8)
HSL
hsl(122, 99%, 35%)
HSB
hsb(122, 99%, 69%)
CMYK
cmyk(99%, 0%, 95%, 31%)
Oklch
oklch(65.4% 0.221 142.7)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#A8A481

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A8A481
RGB
rgb(168, 164, 129)
HSL
hsl(54, 18%, 58%)
HSB
hsb(54, 23%, 66%)
CMYK
cmyk(0%, 2%, 23%, 34%)
Oklch
oklch(71.3% 0.049 102.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F4E5B
5B3C2F

Analogous

2F5B52
2F4E5B
2F385B

Triadic

2F4E5B
5B2F4E
4E5B2F

Split-Comp.

2F4E5B
5B2F38
5B522F

Tetradic

2F4E5B
522F5B
5B3C2F
385B2F

Contrast Matrix WCAG 2.1 Contrast

2F4E5B
FD053F
FFFFFF
01AF08
A8A481
—
2.2
Fail
8.9
AAA
3.0
AA Large
3.5
AA Large
2.2
Fail
—
4.0
AA Large
1.4
Fail
1.6
Fail
8.9
AAA
4.0
AA Large
—
2.9
Fail
2.5
Fail
3.0
AA Large
1.4
Fail
2.9
Fail
—
1.2
Fail
3.5
AA Large
1.6
Fail
2.5
Fail
1.2
Fail
—
White BG
8.9AAA
4.0AA Large
1.0Fail
2.9Fail
2.5Fail
Black BG
2.4Fail
5.3AA
21.0AAA
7.1AAA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3C3D58
928F31
FFFFFF
4C4E30
A6A689

Deuteranopia

3B3857
A0B32E
FFFFFF
42353A
A7A78C

Tritanopia

315555
F12623
FFFFFF
0A5057
A89092

Achromatopsia

464646
565656
FFFFFF
686868
A1A1A1

Shades & Tints Shades & Tints

#2F4E5B

Dark
Light

#FD053F

Dark
Light

#FFFFFF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f4e5b;
  --color-2: #fd053f;
  --color-3: #ffffff;
  --color-4: #01af08;
  --color-5: #a8a481;
}

SCSS

$color-1: #2f4e5b;
$color-2: #fd053f;
$color-3: #ffffff;
$color-4: #01af08;
$color-5: #a8a481;

TAILWIND

colors: {
  'brand-1': '#2f4e5b',
  'brand-2': '#fd053f',
  'brand-3': '#ffffff',
  'brand-4': '#01af08',
  'brand-5': '#a8a481',
}

RGB Array

[47, 78, 91], [253, 5, 63], [255, 255, 255], [1, 175, 8], [168, 164, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F4E5B, #FD053F, #FFFFFF, #01AF08, #A8A481 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: #2f4e5b; --color-2: #fd053f; --color-3: #ffffff; --color-4: #01af08; --color-5: #a8a481. 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