← Back to Editor

#230A0E · #F7EBEB · #304B3C · #42663A · #898E18

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

#230A0E

Crimson · Black · Deep Berry

HEX
#230A0E
RGB
rgb(35, 10, 14)
HSL
hsl(350, 56%, 9%)
HSB
hsb(350, 71%, 14%)
CMYK
cmyk(0%, 71%, 60%, 86%)
Oklch
oklch(18.8% 0.043 12.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#F7EBEB

Peach Pink · Linen · Cherry Blossom

HEX
#F7EBEB
RGB
rgb(247, 235, 235)
HSL
hsl(0, 43%, 95%)
HSB
hsb(0, 5%, 97%)
CMYK
cmyk(0%, 5%, 5%, 3%)
Oklch
oklch(95.0% 0.013 17.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#304B3C

Celadon · DarkSlateGray · Forest Green

HEX
#304B3C
RGB
rgb(48, 75, 60)
HSL
hsl(147, 22%, 24%)
HSB
hsb(147, 36%, 29%)
CMYK
cmyk(36%, 0%, 20%, 71%)
Oklch
oklch(38.6% 0.042 159.3)

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

#42663A

Celadon · DarkOliveGreen · Forest Green

HEX
#42663A
RGB
rgb(66, 102, 58)
HSL
hsl(109, 28%, 31%)
HSB
hsb(109, 43%, 40%)
CMYK
cmyk(35%, 0%, 43%, 60%)
Oklch
oklch(47.1% 0.080 140.0)

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

#898E18

Autumn Sage · Olive · Honey Gold

HEX
#898E18
RGB
rgb(137, 142, 24)
HSL
hsl(63, 71%, 33%)
HSB
hsb(63, 83%, 56%)
CMYK
cmyk(4%, 0%, 83%, 44%)
Oklch
oklch(62.2% 0.131 112.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

230A0E
0A2420

Analogous

240A1B
230A0E
24130A

Triadic

230A0E
0E240A
0A0E24

Split-Comp.

230A0E
0A2413
0A1B24

Tetradic

230A0E
1B240A
0A2420
130A24

Contrast Matrix WCAG 2.1 Contrast

230A0E
F7EBEB
304B3C
42663A
898E18
—
16.1
AAA
2.0
Fail
2.8
Fail
5.3
AA
16.1
AAA
—
8.2
AAA
5.6
AA
3.0
AA Large
2.0
Fail
8.2
AAA
—
1.5
Fail
2.7
Fail
2.8
Fail
5.6
AA
1.5
Fail
—
1.9
Fail
5.3
AA
3.0
AA Large
2.7
Fail
1.9
Fail
—
White BG
18.7AAA
1.2Fail
9.6AAA
6.6AA
3.5AA Large
Black BG
1.1Fail
18.0AAA
2.2Fail
3.2AA Large
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

18180D
F2F2EB
3C3C40
525245
8B8B35

Deuteranopia

1A1C0D
F3F3EB
3A3841
504D47
8B8B3B

Tritanopia

220C0C
F6EBEB
314243
444D4F
894B50

Achromatopsia

121212
EFEFEF
414141
565656
7F7F7F

Shades & Tints Shades & Tints

#230A0E

Dark
Light

#F7EBEB

Dark
Light

#304B3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #230a0e;
  --color-2: #f7ebeb;
  --color-3: #304b3c;
  --color-4: #42663a;
  --color-5: #898e18;
}

SCSS

$color-1: #230a0e;
$color-2: #f7ebeb;
$color-3: #304b3c;
$color-4: #42663a;
$color-5: #898e18;

TAILWIND

colors: {
  'brand-1': '#230a0e',
  'brand-2': '#f7ebeb',
  'brand-3': '#304b3c',
  'brand-4': '#42663a',
  'brand-5': '#898e18',
}

RGB Array

[35, 10, 14], [247, 235, 235], [48, 75, 60], [66, 102, 58], [137, 142, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #230A0E, #F7EBEB, #304B3C, #42663A, #898E18 is ideal for: tech websites, dark mode UIs, game UIs, 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: #230a0e; --color-2: #f7ebeb; --color-3: #304b3c; --color-4: #42663a; --color-5: #898e18. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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