#BBC38A + #83B497 + #509F9C + #2184B5 + #41618C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#BBC38A

Fresh Green · Tan · Sunflower

HEX

#BBC38A

RGB

rgb(187, 195, 138)

HSL

hsl(68, 32%, 65%)

HSB

hsb(68, 29%, 76%)

CMYK

cmyk(4%, 0%, 29%, 24%)

Oklch

oklch(79.7% 0.077 114.7)

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

#83B497

Celadon · DarkSeaGreen · Apple Green

HEX

#83B497

RGB

rgb(131, 180, 151)

HSL

hsl(144, 25%, 61%)

HSB

hsb(144, 27%, 71%)

CMYK

cmyk(27%, 0%, 16%, 29%)

Oklch

oklch(72.7% 0.067 158.2)

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

#509F9C

Mineral Blue · CadetBlue · Mint Ice

HEX

#509F9C

RGB

rgb(80, 159, 156)

HSL

hsl(178, 33%, 47%)

HSB

hsb(178, 50%, 62%)

CMYK

cmyk(50%, 0%, 2%, 38%)

Oklch

oklch(65.2% 0.078 192.1)

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

#2184B5

Lake Blue · SteelBlue · Navy Blue

HEX

#2184B5

RGB

rgb(33, 132, 181)

HSL

hsl(200, 69%, 42%)

HSB

hsb(200, 82%, 71%)

CMYK

cmyk(82%, 27%, 0%, 29%)

Oklch

oklch(58.2% 0.114 236.1)

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

#41618C

Indigo · DarkSlateBlue · Prussian Blue

HEX

#41618C

RGB

rgb(65, 97, 140)

HSL

hsl(214, 37%, 40%)

HSB

hsb(214, 54%, 55%)

CMYK

cmyk(54%, 31%, 0%, 45%)

Oklch

oklch(48.7% 0.079 256.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBC38A

9189C2

Analogous

C2AD89

BBC38A

9EC289

Triadic

BBC38A

89BBC2

C289BB

Split-Comp.

BBC38A

899EC2

AD89C2

Tetradic

BBC38A

89C2AD

9189C2

C2899E

Contrast Matrix WCAG 2.1 Contrast

BBC38A	83B497	509F9C	2184B5	41618C
—	1.3 Fail	1.7 Fail	2.2 Fail	3.4 AA Large
1.3 Fail	—	1.3 Fail	1.8 Fail	2.7 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	2.0 Fail
2.2 Fail	1.8 Fail	1.3 Fail	—	1.5 Fail
3.4 AA Large	2.7 Fail	2.0 Fail	1.5 Fail	—

White BG

1.9Fail

2.3Fail

3.1AA Large

4.2AA Large

6.3AA

Black BG

11.3AAA

8.9AAA

6.8AA

5.0AA

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBF98

98999E

72739D

4C4DA9

4F4F82

Deuteranopia

BEBD9B

9592A0

6E689D

463FA6

4D4B7F

Tritanopia

BBA3A5

85A4A5

549D9D

26A09E

437978

Achromatopsia

BABABA

A2A2A2

878787

6C6C6C

5C5C5C

Shades & Tints Shades & Tints

#BBC38A

Dark

Light

#83B497

Dark

Light

#509F9C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbc38a;
  --color-2: #83b497;
  --color-3: #509f9c;
  --color-4: #2184b5;
  --color-5: #41618c;
}

SCSS

$color-1: #bbc38a;
$color-2: #83b497;
$color-3: #509f9c;
$color-4: #2184b5;
$color-5: #41618c;

TAILWIND

colors: {
  'brand-1': '#bbc38a',
  'brand-2': '#83b497',
  'brand-3': '#509f9c',
  'brand-4': '#2184b5',
  'brand-5': '#41618c',
}

RGB Array

[187, 195, 138], [131, 180, 151], [80, 159, 156], [33, 132, 181], [65, 97, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBC38A, #83B497, #509F9C, #2184B5, #41618C 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: #bbc38a; --color-2: #83b497; --color-3: #509f9c; --color-4: #2184b5; --color-5: #41618c. 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