← Back to Editor

#ADB85F · #300018 · #98A2EB · #FBF4FE · #BCC8CC

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

#ADB85F

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ADB85F
RGB
rgb(173, 184, 95)
HSL
hsl(67, 39%, 55%)
HSB
hsb(67, 48%, 72%)
CMYK
cmyk(6%, 0%, 48%, 28%)
Oklch
oklch(75.5% 0.115 115.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#300018

Dark Violet · Black · Raspberry

HEX
#300018
RGB
rgb(48, 0, 24)
HSL
hsl(330, 100%, 9%)
HSB
hsb(330, 100%, 19%)
CMYK
cmyk(0%, 100%, 50%, 81%)
Oklch
oklch(20.2% 0.083 355.4)

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

#98A2EB

Azure · LightSteelBlue · Cobalt Blue

HEX
#98A2EB
RGB
rgb(152, 162, 235)
HSL
hsl(233, 67%, 76%)
HSB
hsb(233, 35%, 92%)
CMYK
cmyk(35%, 31%, 0%, 8%)
Oklch
oklch(73.3% 0.106 277.4)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#FBF4FE

Lilac · Snow · Lavender

HEX
#FBF4FE
RGB
rgb(251, 244, 254)
HSL
hsl(282, 83%, 98%)
HSB
hsb(282, 4%, 100%)
CMYK
cmyk(1%, 4%, 0%, 0%)
Oklch
oklch(97.5% 0.015 316.0)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#BCC8CC

Sky Blue · Silver · Glacier Blue

HEX
#BCC8CC
RGB
rgb(188, 200, 204)
HSL
hsl(195, 14%, 77%)
HSB
hsb(195, 8%, 80%)
CMYK
cmyk(8%, 2%, 0%, 20%)
Oklch
oklch(82.5% 0.014 219.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADB85F
6A5FB9

Analogous

B9975F
ADB85F
82B95F

Triadic

ADB85F
5FAFB9
B95FAF

Split-Comp.

ADB85F
5F82B9
975FB9

Tetradic

ADB85F
5FB997
6A5FB9
B95F82

Contrast Matrix WCAG 2.1 Contrast

ADB85F
300018
98A2EB
FBF4FE
BCC8CC
—
8.6
AAA
1.1
Fail
2.0
Fail
1.3
Fail
8.6
AAA
—
7.6
AAA
17.1
AAA
10.8
AAA
1.1
Fail
7.6
AAA
—
2.2
Fail
1.4
Fail
2.0
Fail
17.1
AAA
2.2
Fail
—
1.6
Fail
1.3
Fail
10.8
AAA
1.4
Fail
1.6
Fail
—
White BG
2.1Fail
18.4AAA
2.4Fail
1.1Fail
1.7Fail
Black BG
9.8AAA
1.1Fail
8.7AAA
19.5AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B275
1B1B12
9C9CD9
F8F8FC
C1C1CB

Deuteranopia

B1B07A
1E2211
9C9BD5
F8F9FB
C1C0CB

Tritanopia

AE8689
2E0E0D
99CBC8
FBFAF9
BDCACA

Achromatopsia

ABABAB
111111
A7A7A7
F7F7F7
C5C5C5

Shades & Tints Shades & Tints

#ADB85F

Dark
Light

#300018

Dark
Light

#98A2EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #adb85f;
  --color-2: #300018;
  --color-3: #98a2eb;
  --color-4: #fbf4fe;
  --color-5: #bcc8cc;
}

SCSS

$color-1: #adb85f;
$color-2: #300018;
$color-3: #98a2eb;
$color-4: #fbf4fe;
$color-5: #bcc8cc;

TAILWIND

colors: {
  'brand-1': '#adb85f',
  'brand-2': '#300018',
  'brand-3': '#98a2eb',
  'brand-4': '#fbf4fe',
  'brand-5': '#bcc8cc',
}

RGB Array

[173, 184, 95], [48, 0, 24], [152, 162, 235], [251, 244, 254], [188, 200, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #ADB85F, #300018, #98A2EB, #FBF4FE, #BCC8CC 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: #adb85f; --color-2: #300018; --color-3: #98a2eb; --color-4: #fbf4fe; --color-5: #bcc8cc. 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