← Back to Editor

#183833 · #2B614F · #C46060 · #F2BA9D · #F0D2A8

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#183833

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#183833
RGB
rgb(24, 56, 51)
HSL
hsl(171, 40%, 16%)
HSB
hsb(171, 57%, 22%)
CMYK
cmyk(57%, 0%, 9%, 78%)
Oklch
oklch(31.5% 0.039 182.3)

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

#2B614F

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#2B614F
RGB
rgb(43, 97, 79)
HSL
hsl(160, 39%, 27%)
HSB
hsb(160, 56%, 38%)
CMYK
cmyk(56%, 0%, 19%, 62%)
Oklch
oklch(45.0% 0.065 169.0)

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

#C46060

Crimson · LightCoral · Passion Red

HEX
#C46060
RGB
rgb(196, 96, 96)
HSL
hsl(0, 46%, 57%)
HSB
hsb(0, 51%, 77%)
CMYK
cmyk(0%, 51%, 51%, 23%)
Oklch
oklch(60.9% 0.128 21.6)

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

#F2BA9D

Apricot · BurlyWood · Peach Orange

HEX
#F2BA9D
RGB
rgb(242, 186, 157)
HSL
hsl(20, 77%, 78%)
HSB
hsb(20, 35%, 95%)
CMYK
cmyk(0%, 23%, 35%, 5%)
Oklch
oklch(83.3% 0.076 48.6)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F0D2A8

Goose Yellow · Wheat · Peach Orange

HEX
#F0D2A8
RGB
rgb(240, 210, 168)
HSL
hsl(35, 71%, 80%)
HSB
hsb(35, 30%, 94%)
CMYK
cmyk(0%, 13%, 30%, 6%)
Oklch
oklch(87.9% 0.065 76.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

183833
39181D

Analogous

183924
183833
182E39

Triadic

183833
341839
393418

Split-Comp.

183833
39182E
392418

Tetradic

183833
241839
39181D
2E3918

Contrast Matrix WCAG 2.1 Contrast

183833
2B614F
C46060
F2BA9D
F0D2A8
—
1.8
Fail
3.1
AA Large
7.4
AAA
8.8
AAA
1.8
Fail
—
1.8
Fail
4.2
AA Large
5.0
AA
3.1
AA Large
1.8
Fail
—
2.4
Fail
2.8
Fail
7.4
AAA
4.2
AA Large
2.4
Fail
—
1.2
Fail
8.8
AAA
5.0
AA
2.8
Fail
1.2
Fail
—
White BG
12.7AAA
7.2AAA
4.0AA Large
1.7Fail
1.4Fail
Black BG
1.7Fail
2.9Fail
5.2AA
12.3AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262634
424353
999860
DAD9A4
E3E3B2

Deuteranopia

242235
3F3B54
9FA660
DDE1A6
E5E7B5

Tritanopia

1A3535
2E5758
BF6060
EFAAAB
EFBABC

Achromatopsia

2E2E2E
4F4F4F
7E7E7E
C7C7C7
D6D6D6

Shades & Tints Shades & Tints

#183833

Dark
Light

#2B614F

Dark
Light

#C46060

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #183833;
  --color-2: #2b614f;
  --color-3: #c46060;
  --color-4: #f2ba9d;
  --color-5: #f0d2a8;
}

SCSS

$color-1: #183833;
$color-2: #2b614f;
$color-3: #c46060;
$color-4: #f2ba9d;
$color-5: #f0d2a8;

TAILWIND

colors: {
  'brand-1': '#183833',
  'brand-2': '#2b614f',
  'brand-3': '#c46060',
  'brand-4': '#f2ba9d',
  'brand-5': '#f0d2a8',
}

RGB Array

[24, 56, 51], [43, 97, 79], [196, 96, 96], [242, 186, 157], [240, 210, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #183833, #2B614F, #C46060, #F2BA9D, #F0D2A8 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: #183833; --color-2: #2b614f; --color-3: #c46060; --color-4: #f2ba9d; --color-5: #f0d2a8. 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 nature-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