← Back to Editor

#98B5A1 · #302F28 · #AB9422 · #F2462C · #FFF6C9

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#98B5A1

Celadon · DarkSeaGreen · Apple Green

HEX
#98B5A1
RGB
rgb(152, 181, 161)
HSL
hsl(139, 16%, 65%)
HSB
hsb(139, 16%, 71%)
CMYK
cmyk(16%, 0%, 11%, 29%)
Oklch
oklch(74.6% 0.043 155.1)

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

#302F28

Autumn Sage · DarkSlateGray · Dark Stone

HEX
#302F28
RGB
rgb(48, 47, 40)
HSL
hsl(53, 9%, 17%)
HSB
hsb(53, 17%, 19%)
CMYK
cmyk(0%, 2%, 17%, 81%)
Oklch
oklch(30.4% 0.012 100.4)

Traditional「Autumn Sage」· Paint「Dark Stone」· Creative Midnight Shadow

#AB9422

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#AB9422
RGB
rgb(171, 148, 34)
HSL
hsl(50, 67%, 40%)
HSB
hsb(50, 80%, 67%)
CMYK
cmyk(0%, 13%, 80%, 33%)
Oklch
oklch(66.8% 0.128 96.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F2462C

Vermilion · Tomato · Passion Red

HEX
#F2462C
RGB
rgb(242, 70, 44)
HSL
hsl(8, 88%, 56%)
HSB
hsb(8, 82%, 95%)
CMYK
cmyk(0%, 71%, 82%, 5%)
Oklch
oklch(64.1% 0.212 31.6)

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

#FFF6C9

Fresh Green · Bisque · Lemon Cream

HEX
#FFF6C9
RGB
rgb(255, 246, 201)
HSL
hsl(50, 100%, 89%)
HSB
hsb(50, 21%, 100%)
CMYK
cmyk(0%, 4%, 21%, 0%)
Oklch
oklch(96.9% 0.059 98.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

98B5A1
B497AB

Analogous

9DB497
98B5A1
97B4AF

Triadic

98B5A1
A197B4
B4A197

Split-Comp.

98B5A1
AF97B4
B4979D

Tetradic

98B5A1
979DB4
B497AB
B4AF97

Contrast Matrix WCAG 2.1 Contrast

98B5A1
302F28
AB9422
F2462C
FFF6C9
—
6.1
AA
1.4
Fail
1.7
Fail
2.0
Fail
6.1
AA
—
4.5
AA Large
3.6
AA Large
12.3
AAA
1.4
Fail
4.5
AA Large
—
1.2
Fail
2.8
Fail
1.7
Fail
3.6
AA Large
1.2
Fail
—
3.4
AA Large
2.0
Fail
12.3
AAA
2.8
Fail
3.4
AA Large
—
White BG
2.2Fail
13.4AAA
3.0AA Large
3.7AA Large
1.1Fail
Black BG
9.5AAA
1.6Fail
7.0AA
5.7AA
19.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5A6
30302A
A1A13E
A8A632
FBFBD4

Deuteranopia

A3A1A7
30302A
A2A444
B2BE34
FCFCD7

Tritanopia

99AAAB
302B2B
AA5358
E93738
FFDCDE

Achromatopsia

AAAAAA
2F2F2F
8E8E8E
767676
F4F4F4

Shades & Tints Shades & Tints

#98B5A1

Dark
Light

#302F28

Dark
Light

#AB9422

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #98b5a1;
  --color-2: #302f28;
  --color-3: #ab9422;
  --color-4: #f2462c;
  --color-5: #fff6c9;
}

SCSS

$color-1: #98b5a1;
$color-2: #302f28;
$color-3: #ab9422;
$color-4: #f2462c;
$color-5: #fff6c9;

TAILWIND

colors: {
  'brand-1': '#98b5a1',
  'brand-2': '#302f28',
  'brand-3': '#ab9422',
  'brand-4': '#f2462c',
  'brand-5': '#fff6c9',
}

RGB Array

[152, 181, 161], [48, 47, 40], [171, 148, 34], [242, 70, 44], [255, 246, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #98B5A1, #302F28, #AB9422, #F2462C, #FFF6C9 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: #98b5a1; --color-2: #302f28; --color-3: #ab9422; --color-4: #f2462c; --color-5: #fff6c9. 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