← Back to Editor

#BBFCDC · #C8C915 · #26ADDC · #444B3B · #C67F03

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#BBFCDC

Jade · LightBlue · Mint Green

HEX
#BBFCDC
RGB
rgb(187, 252, 220)
HSL
hsl(150, 92%, 86%)
HSB
hsb(150, 26%, 99%)
CMYK
cmyk(26%, 0%, 13%, 1%)
Oklch
oklch(93.9% 0.078 163.1)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#C8C915

Autumn Sage · GoldenRod · Honey Gold

HEX
#C8C915
RGB
rgb(200, 201, 21)
HSL
hsl(60, 81%, 44%)
HSB
hsb(60, 90%, 79%)
CMYK
cmyk(0%, 0%, 90%, 21%)
Oklch
oklch(80.9% 0.173 110.1)

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

#26ADDC

Lake Blue · DodgerBlue · Lake Green

HEX
#26ADDC
RGB
rgb(38, 173, 220)
HSL
hsl(195, 72%, 51%)
HSB
hsb(195, 83%, 86%)
CMYK
cmyk(83%, 21%, 0%, 14%)
Oklch
oklch(70.0% 0.128 227.7)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#444B3B

Grass Green · DarkSlateGray · Forest Green

HEX
#444B3B
RGB
rgb(68, 75, 59)
HSL
hsl(86, 12%, 26%)
HSB
hsb(86, 21%, 29%)
CMYK
cmyk(9%, 0%, 21%, 71%)
Oklch
oklch(40.1% 0.028 126.8)

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

#C67F03

Ochre · DarkGoldenRod · Amber Brown

HEX
#C67F03
RGB
rgb(198, 127, 3)
HSL
hsl(38, 97%, 39%)
HSB
hsb(38, 98%, 78%)
CMYK
cmyk(0%, 36%, 98%, 22%)
Oklch
oklch(65.5% 0.141 70.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBFCDC
FCBADB

Analogous

BAFCBA
BBFCDC
BAFCFC

Triadic

BBFCDC
DBBAFC
FCDBBA

Split-Comp.

BBFCDC
FCBAFC
FCBABA

Tetradic

BBFCDC
BABAFC
FCBADB
FCFCBA

Contrast Matrix WCAG 2.1 Contrast

BBFCDC
C8C915
26ADDC
444B3B
C67F03
—
1.5
Fail
2.2
Fail
7.8
AAA
2.8
Fail
1.5
Fail
—
1.5
Fail
5.1
AA
1.8
Fail
2.2
Fail
1.5
Fail
—
3.5
AA Large
1.3
Fail
7.8
AAA
5.1
AA
3.5
AA Large
—
2.8
Fail
2.8
Fail
1.8
Fail
1.3
Fail
2.8
Fail
—
White BG
1.2Fail
1.8Fail
2.6Fail
9.1AAA
3.3AA Large
Black BG
18.1AAA
11.8AAA
8.1AAA
2.3Fail
6.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D8E4
C8C841
6062D1
47473F
A7A721

Deuteranopia

D3CFE6
C8C84B
594FCE
474640
ABB128

Tritanopia

BEEAEB
C8636B
2DC8C6
444243
C2393E

Achromatopsia

E5E5E5
B4B4B4
8A8A8A
474747
868686

Shades & Tints Shades & Tints

#BBFCDC

Dark
Light

#C8C915

Dark
Light

#26ADDC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbfcdc;
  --color-2: #c8c915;
  --color-3: #26addc;
  --color-4: #444b3b;
  --color-5: #c67f03;
}

SCSS

$color-1: #bbfcdc;
$color-2: #c8c915;
$color-3: #26addc;
$color-4: #444b3b;
$color-5: #c67f03;

TAILWIND

colors: {
  'brand-1': '#bbfcdc',
  'brand-2': '#c8c915',
  'brand-3': '#26addc',
  'brand-4': '#444b3b',
  'brand-5': '#c67f03',
}

RGB Array

[187, 252, 220], [200, 201, 21], [38, 173, 220], [68, 75, 59], [198, 127, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #BBFCDC, #C8C915, #26ADDC, #444B3B, #C67F03 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bbfcdc; --color-2: #c8c915; --color-3: #26addc; --color-4: #444b3b; --color-5: #c67f03. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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