← Back to Editor

#283435 · #738E89 · #A9E2B6 · #CC646A · #FD004B

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

#283435

Slate Blue · DarkSlateGray · Peacock Green

HEX
#283435
RGB
rgb(40, 52, 53)
HSL
hsl(185, 14%, 18%)
HSB
hsb(185, 25%, 21%)
CMYK
cmyk(25%, 2%, 0%, 79%)
Oklch
oklch(31.4% 0.016 202.6)

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

#738E89

Mineral Blue · SlateGray · Mint Ice

HEX
#738E89
RGB
rgb(115, 142, 137)
HSL
hsl(169, 11%, 50%)
HSB
hsb(169, 19%, 56%)
CMYK
cmyk(19%, 0%, 4%, 44%)
Oklch
oklch(62.4% 0.032 182.8)

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

#A9E2B6

Celadon · Silver · Apple Green

HEX
#A9E2B6
RGB
rgb(169, 226, 182)
HSL
hsl(134, 50%, 77%)
HSB
hsb(134, 25%, 89%)
CMYK
cmyk(25%, 0%, 19%, 11%)
Oklch
oklch(86.2% 0.084 151.3)

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

#CC646A

Crimson · LightCoral · Passion Red

HEX
#CC646A
RGB
rgb(204, 100, 106)
HSL
hsl(357, 50%, 60%)
HSB
hsb(357, 51%, 80%)
CMYK
cmyk(0%, 51%, 48%, 20%)
Oklch
oklch(62.9% 0.132 18.1)

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

#FD004B

Dark Violet · Crimson · Camellia

HEX
#FD004B
RGB
rgb(253, 0, 75)
HSL
hsl(342, 100%, 50%)
HSB
hsb(342, 100%, 99%)
CMYK
cmyk(0%, 100%, 70%, 1%)
Oklch
oklch(63.0% 0.252 18.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

283435
342927

Analogous

27342F
283435
272D34

Triadic

283435
342733
333427

Split-Comp.

283435
34272D
342F27

Tetradic

283435
2F2734
342927
2D3427

Contrast Matrix WCAG 2.1 Contrast

283435
738E89
A9E2B6
CC646A
FD004B
—
3.6
AA Large
8.7
AAA
3.4
AA Large
3.2
AA Large
3.6
AA Large
—
2.4
Fail
1.1
Fail
1.1
Fail
8.7
AAA
2.4
Fail
—
2.5
Fail
2.7
Fail
3.4
AA Large
1.1
Fail
2.5
Fail
—
1.1
Fail
3.2
AA Large
1.1
Fail
2.7
Fail
1.1
Fail
—
White BG
12.9AAA
3.5AA Large
1.5Fail
3.8AA Large
4.0AA Large
Black BG
1.6Fail
6.0AA
14.2AAA
5.6AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2D2D35
7F7F8A
C2C2C1
9F9E69
8F8D39

Deuteranopia

2D2C35
7D7B8B
BEBAC3
A5AD68
9EB135

Tritanopia

293535
748B8B
ACC9CB
C76767
F02B27

Achromatopsia

313131
858585
CCCCCC
848484
545454

Shades & Tints Shades & Tints

#283435

Dark
Light

#738E89

Dark
Light

#A9E2B6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #283435;
  --color-2: #738e89;
  --color-3: #a9e2b6;
  --color-4: #cc646a;
  --color-5: #fd004b;
}

SCSS

$color-1: #283435;
$color-2: #738e89;
$color-3: #a9e2b6;
$color-4: #cc646a;
$color-5: #fd004b;

TAILWIND

colors: {
  'brand-1': '#283435',
  'brand-2': '#738e89',
  'brand-3': '#a9e2b6',
  'brand-4': '#cc646a',
  'brand-5': '#fd004b',
}

RGB Array

[40, 52, 53], [115, 142, 137], [169, 226, 182], [204, 100, 106], [253, 0, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #283435, #738E89, #A9E2B6, #CC646A, #FD004B 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: #283435; --color-2: #738e89; --color-3: #a9e2b6; --color-4: #cc646a; --color-5: #fd004b. 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