← Back to Editor

#63918B · #66524D · #A19358 · #C2BE74 · #D1D98E

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#63918B

Mineral Blue · SlateGray · Mint Ice

HEX
#63918B
RGB
rgb(99, 145, 139)
HSL
hsl(172, 19%, 48%)
HSB
hsb(172, 32%, 57%)
CMYK
cmyk(32%, 0%, 4%, 43%)
Oklch
oklch(62.2% 0.051 185.8)

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

#66524D

Crimson · DimGray · Wine Red

HEX
#66524D
RGB
rgb(102, 82, 77)
HSL
hsl(12, 14%, 35%)
HSB
hsb(12, 25%, 40%)
CMYK
cmyk(0%, 20%, 25%, 60%)
Oklch
oklch(45.7% 0.028 34.4)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#A19358

Ochre · Gray · Honey Gold

HEX
#A19358
RGB
rgb(161, 147, 88)
HSL
hsl(48, 29%, 49%)
HSB
hsb(48, 45%, 63%)
CMYK
cmyk(0%, 9%, 45%, 37%)
Oklch
oklch(66.2% 0.080 96.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#C2BE74

Fresh Green · Tan · Sunflower

HEX
#C2BE74
RGB
rgb(194, 190, 116)
HSL
hsl(57, 39%, 61%)
HSB
hsb(57, 40%, 76%)
CMYK
cmyk(0%, 2%, 40%, 24%)
Oklch
oklch(78.8% 0.096 105.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#D1D98E

Fresh Green · Khaki · Sunflower

HEX
#D1D98E
RGB
rgb(209, 217, 142)
HSL
hsl(66, 50%, 70%)
HSB
hsb(66, 35%, 85%)
CMYK
cmyk(4%, 0%, 35%, 15%)
Oklch
oklch(86.2% 0.097 113.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63918B
926369

Analogous

639274
63918B
638192

Triadic

63918B
8B6392
928B63

Split-Comp.

63918B
926381
927463

Tetradic

63918B
746392
926369
819263

Contrast Matrix WCAG 2.1 Contrast

63918B
66524D
A19358
C2BE74
D1D98E
—
2.1
Fail
1.1
Fail
1.8
Fail
2.4
Fail
2.1
Fail
—
2.4
Fail
3.8
AA Large
4.9
AA
1.1
Fail
2.4
Fail
—
1.6
Fail
2.1
Fail
1.8
Fail
3.8
AA Large
1.6
Fail
—
1.3
Fail
2.4
Fail
4.9
AA
2.1
Fail
1.3
Fail
—
White BG
3.5AA Large
7.3AAA
3.1AA Large
1.9Fail
1.5Fail
Black BG
6.0AA
2.9Fail
6.8AA
10.9AAA
14.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

77778C
5D5D4E
9B9B66
C0C086
D4D5A0

Deuteranopia

74718D
5F604F
9C9D6A
C1C18A
D4D3A5

Tritanopia

658E8E
654F4F
A07274
C29497
D1AEB2

Achromatopsia

838383
575757
909090
B7B7B7
CECECE

Shades & Tints Shades & Tints

#63918B

Dark
Light

#66524D

Dark
Light

#A19358

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63918b;
  --color-2: #66524d;
  --color-3: #a19358;
  --color-4: #c2be74;
  --color-5: #d1d98e;
}

SCSS

$color-1: #63918b;
$color-2: #66524d;
$color-3: #a19358;
$color-4: #c2be74;
$color-5: #d1d98e;

TAILWIND

colors: {
  'brand-1': '#63918b',
  'brand-2': '#66524d',
  'brand-3': '#a19358',
  'brand-4': '#c2be74',
  'brand-5': '#d1d98e',
}

RGB Array

[99, 145, 139], [102, 82, 77], [161, 147, 88], [194, 190, 116], [209, 217, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #63918B, #66524D, #A19358, #C2BE74, #D1D98E 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: #63918b; --color-2: #66524d; --color-3: #a19358; --color-4: #c2be74; --color-5: #d1d98e. 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