#263D14 + #4D4B17 + #888536 + #BDC940 + #208A7D · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#263D14

Pine Green · DarkGreen · Dark Green

HEX

#263D14

RGB

rgb(38, 61, 20)

HSL

hsl(94, 51%, 16%)

HSB

hsb(94, 67%, 24%)

CMYK

cmyk(38%, 0%, 67%, 76%)

Oklch

oklch(33.0% 0.071 133.5)

Traditional「Pine Green」· Paint「Dark Green」· Creative Blush Sunrise

#4D4B17

Autumn Sage · DarkOliveGreen · Amber Gold

HEX

#4D4B17

RGB

rgb(77, 75, 23)

HSL

hsl(58, 54%, 20%)

HSB

hsb(58, 70%, 30%)

CMYK

cmyk(0%, 3%, 70%, 70%)

Oklch

oklch(40.3% 0.072 107.1)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#888536

Autumn Sage · Olive · Honey Gold

HEX

#888536

RGB

rgb(136, 133, 54)

HSL

hsl(58, 43%, 37%)

HSB

hsb(58, 60%, 53%)

CMYK

cmyk(0%, 2%, 60%, 47%)

Oklch

oklch(60.3% 0.101 107.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#BDC940

Autumn Sage · GoldenRod · Sunflower

HEX

#BDC940

RGB

rgb(189, 201, 64)

HSL

hsl(65, 56%, 52%)

HSB

hsb(65, 68%, 79%)

CMYK

cmyk(6%, 0%, 68%, 21%)

Oklch

oklch(80.2% 0.157 114.3)

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

#208A7D

Mineral Blue · Teal · Mint Ice

HEX

#208A7D

RGB

rgb(32, 138, 125)

HSL

hsl(173, 62%, 33%)

HSB

hsb(173, 77%, 54%)

CMYK

cmyk(77%, 0%, 9%, 46%)

Oklch

oklch(57.3% 0.094 182.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

263D14

2C143E

Analogous

3B3E14

263D14

143E17

Triadic

263D14

14263E

3E1426

Split-Comp.

263D14

17143E

3E143B

Tetradic

263D14

143B3E

2C143E

3E1714

Contrast Matrix WCAG 2.1 Contrast

263D14	4D4B17	888536	BDC940	208A7D
—	1.3 Fail	3.1 AA Large	6.6 AA	2.8 Fail
1.3 Fail	—	2.3 Fail	5.0 AA	2.1 Fail
3.1 AA Large	2.3 Fail	—	2.1 Fail	1.1 Fail
6.6 AA	5.0 AA	2.1 Fail	—	2.3 Fail
2.8 Fail	2.1 Fail	1.1 Fail	2.3 Fail	—

White BG

11.9AAA

9.0AAA

3.8AA Large

1.8Fail

4.2AA Large

Black BG

1.8Fail

2.3Fail

5.5AA

11.6AAA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

30301E

4C4C24

878749

C2C261

4E4F80

Deuteranopia

2F2D20

4C4C27

87874E

C2C169

484081

Tritanopia

272627

4D2E30

88585C

BE7B81

258383

Achromatopsia

313131

464646

7D7D7D

B6B6B6

696969

Shades & Tints Shades & Tints

#263D14

Dark

Light

#4D4B17

Dark

Light

#888536

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #263d14;
  --color-2: #4d4b17;
  --color-3: #888536;
  --color-4: #bdc940;
  --color-5: #208a7d;
}

SCSS

$color-1: #263d14;
$color-2: #4d4b17;
$color-3: #888536;
$color-4: #bdc940;
$color-5: #208a7d;

TAILWIND

colors: {
  'brand-1': '#263d14',
  'brand-2': '#4d4b17',
  'brand-3': '#888536',
  'brand-4': '#bdc940',
  'brand-5': '#208a7d',
}

RGB Array

[38, 61, 20], [77, 75, 23], [136, 133, 54], [189, 201, 64], [32, 138, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #263D14, #4D4B17, #888536, #BDC940, #208A7D is ideal for: tech websites, dark mode UIs, game UIs. 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: #263d14; --color-2: #4d4b17; --color-3: #888536; --color-4: #bdc940; --color-5: #208a7d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 cool-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