← Back to Editor

#CFD190 · #81B589 · #43A5A8 · #1F69AD · #452B82

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CFD190

Fresh Green · Tan · Sunflower

HEX
#CFD190
RGB
rgb(207, 209, 144)
HSL
hsl(62, 41%, 69%)
HSB
hsb(62, 31%, 82%)
CMYK
cmyk(1%, 0%, 31%, 18%)
Oklch
oklch(84.4% 0.085 109.6)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#81B589

Celadon · DarkSeaGreen · Apple Green

HEX
#81B589
RGB
rgb(129, 181, 137)
HSL
hsl(129, 26%, 61%)
HSB
hsb(129, 29%, 71%)
CMYK
cmyk(29%, 0%, 24%, 29%)
Oklch
oklch(72.5% 0.084 148.7)

TraditionalCeladon」· PaintApple Green」· Creative Mint Breeze

#43A5A8

Slate Blue · CadetBlue · Mint Ice

HEX
#43A5A8
RGB
rgb(67, 165, 168)
HSL
hsl(182, 43%, 46%)
HSB
hsb(182, 60%, 66%)
CMYK
cmyk(60%, 2%, 0%, 34%)
Oklch
oklch(66.6% 0.091 198.0)

TraditionalSlate Blue」· PaintMint Ice」· Creative Blush Sunrise

#1F69AD

Lake Blue · SteelBlue · Prussian Blue

HEX
#1F69AD
RGB
rgb(31, 105, 173)
HSL
hsl(209, 70%, 40%)
HSB
hsb(209, 82%, 68%)
CMYK
cmyk(82%, 39%, 0%, 32%)
Oklch
oklch(51.2% 0.129 250.6)

TraditionalLake Blue」· PaintPrussian Blue」· Creative Blush Sunrise

#452B82

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#452B82
RGB
rgb(69, 43, 130)
HSL
hsl(258, 50%, 34%)
HSB
hsb(258, 67%, 51%)
CMYK
cmyk(47%, 67%, 0%, 49%)
Oklch
oklch(37.3% 0.139 292.0)

TraditionalDeep Indigo」· PaintPrussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD190
9290D0

Analogous

D0B290
CFD190
AED090

Triadic

CFD190
90CED0
D090CE

Split-Comp.

CFD190
90AED0
B290D0

Tetradic

CFD190
90D0B2
9290D0
D090AE

Contrast Matrix WCAG 2.1 Contrast

CFD190
81B589
43A5A8
1F69AD
452B82
1.5
Fail
1.8
Fail
3.6
AA Large
6.9
AA
1.5
Fail
1.2
Fail
2.4
Fail
4.6
AA
1.8
Fail
1.2
Fail
2.0
Fail
3.7
AA Large
3.6
AA Large
2.4
Fail
2.0
Fail
1.9
Fail
6.9
AA
4.6
AA
3.7
AA Large
1.9
Fail
White BG
1.6Fail
2.4Fail
2.9Fail
5.7AA
10.9AAA
Black BG
13.2AAA
8.9AAA
7.2AAA
3.7AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0A0
989894
6D6EA7
3F409D
3A3A6D

Deuteranopia

D0D0A4
959196
6860A7
3B3599
3B3D68

Tritanopia

CFACAF
849C9E
48A7A7
23908D
445C59

Achromatopsia

C9C9C9
A0A0A0
888888
5B5B5B
3D3D3D

Shades & Tints Shades & Tints

#CFD190

Dark
Light

#81B589

Dark
Light

#43A5A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd190;
  --color-2: #81b589;
  --color-3: #43a5a8;
  --color-4: #1f69ad;
  --color-5: #452b82;
}

SCSS

$color-1: #cfd190;
$color-2: #81b589;
$color-3: #43a5a8;
$color-4: #1f69ad;
$color-5: #452b82;

TAILWIND

colors: {
  'brand-1': '#cfd190',
  'brand-2': '#81b589',
  'brand-3': '#43a5a8',
  'brand-4': '#1f69ad',
  'brand-5': '#452b82',
}

RGB Array

[207, 209, 144], [129, 181, 137], [67, 165, 168], [31, 105, 173], [69, 43, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFD190, #81B589, #43A5A8, #1F69AD, #452B82 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: #cfd190; --color-2: #81b589; --color-3: #43a5a8; --color-4: #1f69ad; --color-5: #452b82. 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 general-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