#F27777 + #DE9883 + #C9B88F + #B1C19F + #99C9AF · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F27777

Peach Pink · LightCoral · Coral Red

HEX

#F27777

RGB

rgb(242, 119, 119)

HSL

hsl(0, 83%, 71%)

HSB

hsb(0, 51%, 95%)

CMYK

cmyk(0%, 51%, 51%, 5%)

Oklch

oklch(71.2% 0.152 21.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#DE9883

Peach Pink · DarkSalmon · Coral Red

HEX

#DE9883

RGB

rgb(222, 152, 131)

HSL

hsl(14, 58%, 69%)

HSB

hsb(14, 41%, 87%)

CMYK

cmyk(0%, 32%, 41%, 13%)

Oklch

oklch(74.3% 0.090 37.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#C9B88F

Ginger · Tan · Sunflower

HEX

#C9B88F

RGB

rgb(201, 184, 143)

HSL

hsl(42, 35%, 67%)

HSB

hsb(42, 29%, 79%)

CMYK

cmyk(0%, 8%, 29%, 21%)

Oklch

oklch(78.7% 0.058 88.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#B1C19F

Willow Green · DarkGray · Apple Green

HEX

#B1C19F

RGB

rgb(177, 193, 159)

HSL

hsl(88, 22%, 69%)

HSB

hsb(88, 18%, 76%)

CMYK

cmyk(8%, 0%, 18%, 24%)

Oklch

oklch(78.9% 0.050 128.1)

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

#99C9AF

Celadon · DarkSeaGreen · Apple Green

HEX

#99C9AF

RGB

rgb(153, 201, 175)

HSL

hsl(148, 31%, 69%)

HSB

hsb(148, 24%, 79%)

CMYK

cmyk(24%, 0%, 13%, 21%)

Oklch

oklch(79.5% 0.062 160.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F27777

78F2F2

Analogous

F278B5

F27777

F2B578

Triadic

F27777

78F278

7878F2

Split-Comp.

F27777

78F2B5

78B5F2

Tetradic

F27777

B5F278

78F2F2

B578F2

Contrast Matrix WCAG 2.1 Contrast

F27777	DE9883	C9B88F	B1C19F	99C9AF
—	1.2 Fail	1.4 Fail	1.4 Fail	1.5 Fail
1.2 Fail	—	1.2 Fail	1.2 Fail	1.3 Fail
1.4 Fail	1.2 Fail	—	1.0 Fail	1.1 Fail
1.4 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.5 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

2.7Fail

2.4Fail

2.0Fail

1.9Fail

Black BG

7.7AAA

8.9AAA

10.7AAA

11.0AAA

11.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBC77

C0BF88

C2C199

B8B8A7

AEAEB5

Deuteranopia

C4CD77

C4C989

C3C49B

B7B6A9

ABA7B7

Tritanopia

EC7777

DA8C8D

C8A1A2

B2AEAF

9BBABB

Achromatopsia

9C9C9C

ABABAB

B8B8B8

Shades & Tints Shades & Tints

#F27777

Dark

Light

#DE9883

Dark

Light

#C9B88F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f27777;
  --color-2: #de9883;
  --color-3: #c9b88f;
  --color-4: #b1c19f;
  --color-5: #99c9af;
}

SCSS

$color-1: #f27777;
$color-2: #de9883;
$color-3: #c9b88f;
$color-4: #b1c19f;
$color-5: #99c9af;

TAILWIND

colors: {
  'brand-1': '#f27777',
  'brand-2': '#de9883',
  'brand-3': '#c9b88f',
  'brand-4': '#b1c19f',
  'brand-5': '#99c9af',
}

RGB Array

[242, 119, 119], [222, 152, 131], [201, 184, 143], [177, 193, 159], [153, 201, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F27777, #DE9883, #C9B88F, #B1C19F, #99C9AF is ideal for: health products, baby brands, fresh-style blogs. 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: #f27777; --color-2: #de9883; --color-3: #c9b88f; --color-4: #b1c19f; --color-5: #99c9af. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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