#3B987B + #B0AF1F + #CBBBA2 + #6BB698 + #E63E61 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#3B987B

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#3B987B

RGB

rgb(59, 152, 123)

HSL

hsl(161, 44%, 41%)

HSB

hsb(161, 61%, 60%)

CMYK

cmyk(61%, 0%, 19%, 40%)

Oklch

oklch(61.6% 0.099 169.3)

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

#B0AF1F

Autumn Sage · GoldenRod · Honey Gold

HEX

#B0AF1F

RGB

rgb(176, 175, 31)

HSL

hsl(60, 70%, 41%)

HSB

hsb(60, 82%, 69%)

CMYK

cmyk(0%, 1%, 82%, 31%)

Oklch

oklch(73.2% 0.151 109.2)

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

#CBBBA2

Goose Yellow · Tan · Warm Sun

HEX

#CBBBA2

RGB

rgb(203, 187, 162)

HSL

hsl(37, 28%, 72%)

HSB

hsb(37, 20%, 80%)

CMYK

cmyk(0%, 8%, 20%, 20%)

Oklch

oklch(79.9% 0.039 79.0)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#6BB698

Mineral Blue · CadetBlue · Olive Green

HEX

#6BB698

RGB

rgb(107, 182, 152)

HSL

hsl(156, 34%, 57%)

HSB

hsb(156, 41%, 71%)

CMYK

cmyk(41%, 0%, 16%, 29%)

Oklch

oklch(71.9% 0.088 166.4)

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

#E63E61

Vermilion · Tomato · Passion Red

HEX

#E63E61

RGB

rgb(230, 62, 97)

HSL

hsl(348, 77%, 57%)

HSB

hsb(348, 73%, 90%)

CMYK

cmyk(0%, 73%, 58%, 10%)

Oklch

oklch(62.1% 0.203 13.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B987B

973B58

Analogous

3B974B

3B987B

3B8697

Triadic

3B987B

793B97

97793B

Split-Comp.

3B987B

973B86

974B3B

Tetradic

3B987B

4B3B97

973B58

86973B

Contrast Matrix WCAG 2.1 Contrast

3B987B	B0AF1F	CBBBA2	6BB698	E63E61
—	1.5 Fail	1.9 Fail	1.5 Fail	1.1 Fail
1.5 Fail	—	1.2 Fail	1.0 Fail	1.7 Fail
1.9 Fail	1.2 Fail	—	1.3 Fail	2.1 Fail
1.5 Fail	1.0 Fail	1.3 Fail	—	1.7 Fail
1.1 Fail	1.7 Fail	2.1 Fail	1.7 Fail	—

White BG

3.5AA Large

2.3Fail

1.9Fail

2.4Fail

4.0AA Large

Black BG

6.0AA

9.0AAA

11.2AAA

8.8AAA

5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636482

B0B042

C4C4A8

8B8C9F

9D9C59

Deuteranopia

5E5784

B0B04A

C5C6AA

8782A1

A7B456

Tritanopia

408889

B05D63

CAADAE

6FA5A6

DE5250

Achromatopsia

797979

9F9F9F

BDBDBD

9C9C9C

747474

Shades & Tints Shades & Tints

#3B987B

Dark

Light

#B0AF1F

Dark

Light

#CBBBA2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b987b;
  --color-2: #b0af1f;
  --color-3: #cbbba2;
  --color-4: #6bb698;
  --color-5: #e63e61;
}

SCSS

$color-1: #3b987b;
$color-2: #b0af1f;
$color-3: #cbbba2;
$color-4: #6bb698;
$color-5: #e63e61;

TAILWIND

colors: {
  'brand-1': '#3b987b',
  'brand-2': '#b0af1f',
  'brand-3': '#cbbba2',
  'brand-4': '#6bb698',
  'brand-5': '#e63e61',
}

RGB Array

[59, 152, 123], [176, 175, 31], [203, 187, 162], [107, 182, 152], [230, 62, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #3B987B, #B0AF1F, #CBBBA2, #6BB698, #E63E61 is ideal for: corporate websites, product showcases, portfolios. 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: #3b987b; --color-2: #b0af1f; --color-3: #cbbba2; --color-4: #6bb698; --color-5: #e63e61. 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. 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