← Back to Editor

#B6CC39 · #34B4A5 · #42332C · #D14A43 · #F09030

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B6CC39

Autumn Sage · GreenYellow · Sunflower

HEX
#B6CC39
RGB
rgb(182, 204, 57)
HSL
hsl(69, 59%, 51%)
HSB
hsb(69, 72%, 80%)
CMYK
cmyk(11%, 0%, 72%, 20%)
Oklch
oklch(80.3% 0.167 117.8)

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

#34B4A5

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#34B4A5
RGB
rgb(52, 180, 165)
HSL
hsl(173, 55%, 45%)
HSB
hsb(173, 71%, 71%)
CMYK
cmyk(71%, 0%, 8%, 29%)
Oklch
oklch(69.8% 0.111 183.6)

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

#42332C

Tangerine · DarkSlateGray · Cinnamon

HEX
#42332C
RGB
rgb(66, 51, 44)
HSL
hsl(19, 20%, 22%)
HSB
hsb(19, 33%, 26%)
CMYK
cmyk(0%, 23%, 33%, 74%)
Oklch
oklch(33.6% 0.025 46.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#D14A43

Vermilion · Chocolate · Passion Red

HEX
#D14A43
RGB
rgb(209, 74, 67)
HSL
hsl(3, 61%, 54%)
HSB
hsb(3, 68%, 82%)
CMYK
cmyk(0%, 65%, 68%, 18%)
Oklch
oklch(59.4% 0.172 26.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F09030

Ginger · GoldenRod · Warm Sun

HEX
#F09030
RGB
rgb(240, 144, 48)
HSL
hsl(30, 86%, 56%)
HSB
hsb(30, 80%, 94%)
CMYK
cmyk(0%, 40%, 80%, 6%)
Oklch
oklch(74.0% 0.155 60.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6CC39
4E38CC

Analogous

CC9838
B6CC39
6CCC38

Triadic

B6CC39
38B6CC
CC38B6

Split-Comp.

B6CC39
386CCC
9838CC

Tetradic

B6CC39
38CC98
4E38CC
CC386C

Contrast Matrix WCAG 2.1 Contrast

B6CC39
34B4A5
42332C
D14A43
F09030
—
1.4
Fail
6.7
AA
2.4
Fail
1.3
Fail
1.4
Fail
—
4.7
AA
1.7
Fail
1.1
Fail
6.7
AA
4.7
AA
—
2.7
Fail
5.0
AA
2.4
Fail
1.7
Fail
2.7
Fail
—
1.8
Fail
1.3
Fail
1.1
Fail
5.0
AA
1.8
Fail
—
White BG
1.8Fail
2.6Fail
12.1AAA
4.4AA Large
2.4Fail
Black BG
11.7AAA
8.2AAA
1.7Fail
4.8AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C05D
6B6DA9
3C3B2E
979545
C6C647

Deuteranopia

BEBD65
645AAA
3C3D2E
9EA845
CCD34D

Tritanopia

B7797F
3AABAC
412F2F
CA4646
EB5A5E

Achromatopsia

B5B5B5
8C8C8C
373737
727272
A2A2A2

Shades & Tints Shades & Tints

#B6CC39

Dark
Light

#34B4A5

Dark
Light

#42332C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6cc39;
  --color-2: #34b4a5;
  --color-3: #42332c;
  --color-4: #d14a43;
  --color-5: #f09030;
}

SCSS

$color-1: #b6cc39;
$color-2: #34b4a5;
$color-3: #42332c;
$color-4: #d14a43;
$color-5: #f09030;

TAILWIND

colors: {
  'brand-1': '#b6cc39',
  'brand-2': '#34b4a5',
  'brand-3': '#42332c',
  'brand-4': '#d14a43',
  'brand-5': '#f09030',
}

RGB Array

[182, 204, 57], [52, 180, 165], [66, 51, 44], [209, 74, 67], [240, 144, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B6CC39, #34B4A5, #42332C, #D14A43, #F09030 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: #b6cc39; --color-2: #34b4a5; --color-3: #42332c; --color-4: #d14a43; --color-5: #f09030. 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