← Back to Editor

#DF3826 · #F3E8BA · #9ABAA2 · #6A9985 · #656E53

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

#DF3826

Vermilion · Crimson · Passion Red

HEX
#DF3826
RGB
rgb(223, 56, 38)
HSL
hsl(6, 74%, 51%)
HSB
hsb(6, 83%, 87%)
CMYK
cmyk(0%, 75%, 83%, 13%)
Oklch
oklch(59.6% 0.206 30.2)

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

#F3E8BA

Goose Yellow · Wheat · Lemon Cream

HEX
#F3E8BA
RGB
rgb(243, 232, 186)
HSL
hsl(48, 70%, 84%)
HSB
hsb(48, 23%, 95%)
CMYK
cmyk(0%, 5%, 23%, 5%)
Oklch
oklch(92.8% 0.061 96.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#9ABAA2

Celadon · DarkSeaGreen · Apple Green

HEX
#9ABAA2
RGB
rgb(154, 186, 162)
HSL
hsl(135, 19%, 67%)
HSB
hsb(135, 17%, 73%)
CMYK
cmyk(17%, 0%, 13%, 27%)
Oklch
oklch(75.8% 0.049 152.7)

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

#6A9985

Mineral Blue · SlateGray · Olive Green

HEX
#6A9985
RGB
rgb(106, 153, 133)
HSL
hsl(154, 19%, 51%)
HSB
hsb(154, 31%, 60%)
CMYK
cmyk(31%, 0%, 13%, 40%)
Oklch
oklch(64.3% 0.059 166.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#656E53

Grass Green · DimGray · Forest Green

HEX
#656E53
RGB
rgb(101, 110, 83)
HSL
hsl(80, 14%, 38%)
HSB
hsb(80, 25%, 43%)
CMYK
cmyk(8%, 0%, 25%, 57%)
Oklch
oklch(52.3% 0.042 122.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DF3826
26CCDF

Analogous

DF2670
DF3826
DF9526

Triadic

DF3826
26DF38
3826DF

Split-Comp.

DF3826
26DF95
2670DF

Tetradic

DF3826
70DF26
26CCDF
9526DF

Contrast Matrix WCAG 2.1 Contrast

DF3826
F3E8BA
9ABAA2
6A9985
656E53
—
3.6
AA Large
2.1
Fail
1.4
Fail
1.2
Fail
3.6
AA Large
—
1.7
Fail
2.6
Fail
4.4
AA Large
2.1
Fail
1.7
Fail
—
1.5
Fail
2.5
Fail
1.4
Fail
2.6
Fail
1.5
Fail
—
1.7
Fail
1.2
Fail
4.4
AA Large
2.5
Fail
1.7
Fail
—
White BG
4.4AA Large
1.2Fail
2.1Fail
3.2AA Large
5.4AA
Black BG
4.7AA
17.1AAA
9.9AAA
6.5AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

97952A
EEEEC5
A8A8A8
7E7F8A
69695A

Deuteranopia

A0AD2B
EFF0C8
A6A4A9
7C788B
68685B

Tritanopia

D72E2F
F2CED0
9CACAD
6C8E8F
655F60

Achromatopsia

686868
E6E6E6
AEAEAE
898989
686868

Shades & Tints Shades & Tints

#DF3826

Dark
Light

#F3E8BA

Dark
Light

#9ABAA2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #df3826;
  --color-2: #f3e8ba;
  --color-3: #9abaa2;
  --color-4: #6a9985;
  --color-5: #656e53;
}

SCSS

$color-1: #df3826;
$color-2: #f3e8ba;
$color-3: #9abaa2;
$color-4: #6a9985;
$color-5: #656e53;

TAILWIND

colors: {
  'brand-1': '#df3826',
  'brand-2': '#f3e8ba',
  'brand-3': '#9abaa2',
  'brand-4': '#6a9985',
  'brand-5': '#656e53',
}

RGB Array

[223, 56, 38], [243, 232, 186], [154, 186, 162], [106, 153, 133], [101, 110, 83]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DF3826, #F3E8BA, #9ABAA2, #6A9985, #656E53 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: #df3826; --color-2: #f3e8ba; --color-3: #9abaa2; --color-4: #6a9985; --color-5: #656e53. 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