← Back to Editor

#42383C · #689E89 · #C1B480 · #F2BC72 · #FF9B66

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 LibraryData Visualization

Color Details Color Details

#42383C

Dark Violet · DarkSlateGray · Dark Stone

HEX
#42383C
RGB
rgb(66, 56, 60)
HSL
hsl(336, 8%, 24%)
HSB
hsb(336, 15%, 26%)
CMYK
cmyk(0%, 15%, 9%, 74%)
Oklch
oklch(35.3% 0.016 351.8)

Traditional「Dark Violet」· Paint「Dark Stone」· Creative Midnight Shadow

#689E89

Mineral Blue · CadetBlue · Olive Green

HEX
#689E89
RGB
rgb(104, 158, 137)
HSL
hsl(157, 22%, 51%)
HSB
hsb(157, 34%, 62%)
CMYK
cmyk(34%, 0%, 13%, 38%)
Oklch
oklch(65.5% 0.066 167.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#C1B480

Ginger · Tan · Sunflower

HEX
#C1B480
RGB
rgb(193, 180, 128)
HSL
hsl(48, 34%, 63%)
HSB
hsb(48, 34%, 76%)
CMYK
cmyk(0%, 7%, 34%, 24%)
Oklch
oklch(76.8% 0.071 95.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#F2BC72

Ginger · BurlyWood · Warm Sun

HEX
#F2BC72
RGB
rgb(242, 188, 114)
HSL
hsl(35, 83%, 70%)
HSB
hsb(35, 53%, 95%)
CMYK
cmyk(0%, 22%, 53%, 5%)
Oklch
oklch(82.9% 0.111 74.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FF9B66

Apricot · SandyBrown · Warm Sun

HEX
#FF9B66
RGB
rgb(255, 155, 102)
HSL
hsl(21, 100%, 70%)
HSB
hsb(21, 60%, 100%)
CMYK
cmyk(0%, 39%, 60%, 0%)
Oklch
oklch(78.2% 0.138 47.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

42383C
38423E

Analogous

423841
42383C
423938

Triadic

42383C
3C4238
383C42

Split-Comp.

42383C
384239
384142

Tetradic

42383C
414238
38423E
393842

Contrast Matrix WCAG 2.1 Contrast

42383C
689E89
C1B480
F2BC72
FF9B66
—
3.7
AA Large
5.4
AA
6.6
AA
5.4
AA
3.7
AA Large
—
1.5
Fail
1.8
Fail
1.5
Fail
5.4
AA
1.5
Fail
—
1.2
Fail
1.0
Fail
6.6
AA
1.8
Fail
1.2
Fail
—
1.2
Fail
5.4
AA
1.5
Fail
1.0
Fail
1.2
Fail
—
White BG
11.3AAA
3.1AA Large
2.1Fail
1.7Fail
2.1Fail
Black BG
1.9Fail
6.8AA
10.1AAA
12.2AAA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E3B
7F808E
BBBB8D
DBDA84
D4D373

Deuteranopia

3E3F3B
7C788F
BCBD90
DEE288
DAE176

Tritanopia

423A3A
6B9293
C09799
EF9295
FA7D7F

Achromatopsia

3B3B3B
8B8B8B
B2B2B2
C4C4C4
B3B3B3

Shades & Tints Shades & Tints

#42383C

Dark
Light

#689E89

Dark
Light

#C1B480

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #42383c;
  --color-2: #689e89;
  --color-3: #c1b480;
  --color-4: #f2bc72;
  --color-5: #ff9b66;
}

SCSS

$color-1: #42383c;
$color-2: #689e89;
$color-3: #c1b480;
$color-4: #f2bc72;
$color-5: #ff9b66;

TAILWIND

colors: {
  'brand-1': '#42383c',
  'brand-2': '#689e89',
  'brand-3': '#c1b480',
  'brand-4': '#f2bc72',
  'brand-5': '#ff9b66',
}

RGB Array

[66, 56, 60], [104, 158, 137], [193, 180, 128], [242, 188, 114], [255, 155, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #42383C, #689E89, #C1B480, #F2BC72, #FF9B66 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #42383c; --color-2: #689e89; --color-3: #c1b480; --color-4: #f2bc72; --color-5: #ff9b66. 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 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