#698243 + #407069 + #22262B + #B33259 + #A81533 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#698243

Grass Green · DarkOliveGreen · Forest Green

HEX

#698243

RGB

rgb(105, 130, 67)

HSL

hsl(84, 32%, 39%)

HSB

hsb(84, 48%, 51%)

CMYK

cmyk(19%, 0%, 48%, 49%)

Oklch

oklch(57.2% 0.093 126.9)

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

#407069

Mineral Blue · SeaGreen · Mint Ice

HEX

#407069

RGB

rgb(64, 112, 105)

HSL

hsl(171, 27%, 35%)

HSB

hsb(171, 43%, 44%)

CMYK

cmyk(43%, 0%, 6%, 56%)

Oklch

oklch(50.9% 0.054 183.8)

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

#22262B

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#22262B

RGB

rgb(34, 38, 43)

HSL

hsl(213, 12%, 15%)

HSB

hsb(213, 21%, 17%)

CMYK

cmyk(21%, 12%, 0%, 83%)

Oklch

oklch(26.7% 0.011 254.0)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#B33259

Dark Violet · Brown · Camellia

HEX

#B33259

RGB

rgb(179, 50, 89)

HSL

hsl(342, 56%, 45%)

HSB

hsb(342, 72%, 70%)

CMYK

cmyk(0%, 72%, 50%, 30%)

Oklch

oklch(52.3% 0.167 7.0)

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

#A81533

Vermilion · Brown · Wine Red

HEX

#A81533

RGB

rgb(168, 21, 51)

HSL

hsl(348, 78%, 37%)

HSB

hsb(348, 87%, 66%)

CMYK

cmyk(0%, 87%, 70%, 34%)

Oklch

oklch(47.2% 0.177 18.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

698243

5D4483

Analogous

837D44

698243

4A8344

Triadic

698243

446A83

83446A

Split-Comp.

698243

444A83

7D4483

Tetradic

698243

44837D

5D4483

83444A

Contrast Matrix WCAG 2.1 Contrast

698243	407069	22262B	B33259	A81533
—	1.3 Fail	3.5 AA Large	1.4 Fail	1.7 Fail
1.3 Fail	—	2.7 Fail	1.1 Fail	1.3 Fail
3.5 AA Large	2.7 Fail	—	2.5 Fail	2.0 Fail
1.4 Fail	1.1 Fail	2.5 Fail	—	1.2 Fail
1.7 Fail	1.3 Fail	2.0 Fail	1.2 Fail	—

White BG

4.3AA Large

5.6AA

15.2AAA

6.0AA

7.4AAA

Black BG

4.9AA

3.7AA Large

1.4Fail

3.5AA Large

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

747452

55556B

24242A

7B7A50

68672C

Deuteranopia

727156

524E6B

24232A

838C4D

717C2A

Tritanopia

6A5E61

426C6C

222929

AD4846

A12625

Achromatopsia

737373

616161

252525

5D5D5D

444444

Shades & Tints Shades & Tints

#698243

Dark

Light

#407069

Dark

Light

#22262B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #698243;
  --color-2: #407069;
  --color-3: #22262b;
  --color-4: #b33259;
  --color-5: #a81533;
}

SCSS

$color-1: #698243;
$color-2: #407069;
$color-3: #22262b;
$color-4: #b33259;
$color-5: #a81533;

TAILWIND

colors: {
  'brand-1': '#698243',
  'brand-2': '#407069',
  'brand-3': '#22262b',
  'brand-4': '#b33259',
  'brand-5': '#a81533',
}

RGB Array

[105, 130, 67], [64, 112, 105], [34, 38, 43], [179, 50, 89], [168, 21, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #698243, #407069, #22262B, #B33259, #A81533 is ideal for: tech websites, dark mode UIs, game UIs. 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: #698243; --color-2: #407069; --color-3: #22262b; --color-4: #b33259; --color-5: #a81533. 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. 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