#303A67 + #1C8890 + #47AF77 + #B2DD7E + #D97BB4 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#303A67

Indigo · DarkSlateGray · Prussian Blue

HEX

#303A67

RGB

rgb(48, 58, 103)

HSL

hsl(229, 36%, 30%)

HSB

hsb(229, 53%, 40%)

CMYK

cmyk(53%, 44%, 0%, 60%)

Oklch

oklch(36.3% 0.079 272.5)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#1C8890

Lake Blue · Teal · Mint Ice

HEX

#1C8890

RGB

rgb(28, 136, 144)

HSL

hsl(184, 67%, 34%)

HSB

hsb(184, 81%, 56%)

CMYK

cmyk(81%, 6%, 0%, 44%)

Oklch

oklch(57.4% 0.091 202.7)

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

#47AF77

Celadon · MediumSeaGreen · Olive Green

HEX

#47AF77

RGB

rgb(71, 175, 119)

HSL

hsl(148, 42%, 48%)

HSB

hsb(148, 59%, 69%)

CMYK

cmyk(59%, 0%, 32%, 31%)

Oklch

oklch(67.8% 0.128 156.8)

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

#B2DD7E

Willow Green · LightGreen · Apple Green

HEX

#B2DD7E

RGB

rgb(178, 221, 126)

HSL

hsl(87, 58%, 68%)

HSB

hsb(87, 43%, 87%)

CMYK

cmyk(19%, 0%, 43%, 13%)

Oklch

oklch(84.5% 0.131 128.8)

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

#D97BB4

Mauve · Orchid · Rose Pink

HEX

#D97BB4

RGB

rgb(217, 123, 180)

HSL

hsl(324, 55%, 67%)

HSB

hsb(324, 43%, 85%)

CMYK

cmyk(0%, 43%, 17%, 15%)

Oklch

oklch(70.3% 0.135 343.9)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

303A67

685E31

Analogous

315768

303A67

423168

Triadic

303A67

68313B

3B6831

Split-Comp.

303A67

684231

576831

Tetradic

303A67

683157

685E31

316842

Contrast Matrix WCAG 2.1 Contrast

303A67	1C8890	47AF77	B2DD7E	D97BB4
—	2.6 Fail	4.0 AA Large	7.0 AAA	3.9 AA Large
2.6 Fail	—	1.5 Fail	2.7 Fail	1.5 Fail
4.0 AA Large	1.5 Fail	—	1.8 Fail	1.0 Fail
7.0 AAA	2.7 Fail	1.8 Fail	—	1.8 Fail
3.9 AA Large	1.5 Fail	1.0 Fail	1.8 Fail	—

White BG

10.9AAA

4.2AA Large

2.7Fail

1.6Fail

2.8Fail

Black BG

1.9Fail

5.0AA

7.7AAA

13.5AAA

7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34345C

4B4C8E

747585

C5C595

B0AFA6

Deuteranopia

34335A

453C8E

6E6688

C2BF9B

B6BDA3

Tritanopia

305452

218D8C

4C8F92

B4A7AB

D49B99

Achromatopsia

3C3C3C

696969

8A8A8A

C5C5C5

9E9E9E

Shades & Tints Shades & Tints

#303A67

Dark

Light

#1C8890

Dark

Light

#47AF77

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #303a67;
  --color-2: #1c8890;
  --color-3: #47af77;
  --color-4: #b2dd7e;
  --color-5: #d97bb4;
}

SCSS

$color-1: #303a67;
$color-2: #1c8890;
$color-3: #47af77;
$color-4: #b2dd7e;
$color-5: #d97bb4;

TAILWIND

colors: {
  'brand-1': '#303a67',
  'brand-2': '#1c8890',
  'brand-3': '#47af77',
  'brand-4': '#b2dd7e',
  'brand-5': '#d97bb4',
}

RGB Array

[48, 58, 103], [28, 136, 144], [71, 175, 119], [178, 221, 126], [217, 123, 180]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #303A67, #1C8890, #47AF77, #B2DD7E, #D97BB4 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: #303a67; --color-2: #1c8890; --color-3: #47af77; --color-4: #b2dd7e; --color-5: #d97bb4. 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