#2D6B8C + #33A387 + #CF5600 + #A8BD33 + #191A16 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2D6B8C

Lake Blue · Teal · Prussian Blue

HEX

#2D6B8C

RGB

rgb(45, 107, 140)

HSL

hsl(201, 51%, 36%)

HSB

hsb(201, 68%, 55%)

CMYK

cmyk(68%, 24%, 0%, 45%)

Oklch

oklch(50.2% 0.082 235.0)

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

#33A387

Mineral Blue · MediumSeaGreen · Mint Ice

HEX

#33A387

RGB

rgb(51, 163, 135)

HSL

hsl(165, 52%, 42%)

HSB

hsb(165, 69%, 64%)

CMYK

cmyk(69%, 0%, 17%, 36%)

Oklch

oklch(64.6% 0.108 172.6)

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

#CF5600

Tangerine · Chocolate · Amber Brown

HEX

#CF5600

RGB

rgb(207, 86, 0)

HSL

hsl(25, 100%, 41%)

HSB

hsb(25, 100%, 81%)

CMYK

cmyk(0%, 58%, 100%, 19%)

Oklch

oklch(60.1% 0.171 45.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#A8BD33

Autumn Sage · GoldenRod · Honey Gold

HEX

#A8BD33

RGB

rgb(168, 189, 51)

HSL

hsl(69, 58%, 47%)

HSB

hsb(69, 73%, 74%)

CMYK

cmyk(11%, 0%, 73%, 26%)

Oklch

oklch(75.8% 0.158 118.0)

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

#191A16

Grass Green · Black · Jet Black

HEX

#191A16

RGB

rgb(25, 26, 22)

HSL

hsl(75, 8%, 9%)

HSB

hsb(75, 15%, 10%)

CMYK

cmyk(4%, 0%, 15%, 90%)

Oklch

oklch(21.5% 0.008 118.5)

Traditional「Grass Green」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2D6B8C

8B4E2D

Analogous

2D8B7D

2D6B8C

2D3B8B

Triadic

2D6B8C

8B2D6A

6A8B2D

Split-Comp.

2D6B8C

8B2D3B

8B7D2D

Tetradic

2D6B8C

7D2D8B

8B4E2D

3B8B2D

Contrast Matrix WCAG 2.1 Contrast

2D6B8C	33A387	CF5600	A8BD33	191A16
—	1.9 Fail	1.4 Fail	2.8 Fail	3.0 Fail
1.9 Fail	—	1.4 Fail	1.5 Fail	5.6 AA
1.4 Fail	1.4 Fail	—	2.0 Fail	4.2 AA Large
2.8 Fail	1.5 Fail	2.0 Fail	—	8.3 AAA
3.0 Fail	5.6 AA	4.2 AA Large	8.3 AAA	—

White BG

5.8AA

3.1AA Large

4.2AA Large

2.1Fail

17.5AAA

Black BG

3.6AA Large

6.7AA

5.0AA

10.0AAA

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

484884

63658E

9B9A15

B1B154

191917

Deuteranopia

444082

5D558F

A2AB1A

B0AE5C

191917

Tritanopia

307E7C

399394

C92529

A96F75

191818

Achromatopsia

5C5C5C

7E7E7E

707070

A7A7A7

191919

Shades & Tints Shades & Tints

#2D6B8C

Dark

Light

#33A387

Dark

Light

#CF5600

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2d6b8c;
  --color-2: #33a387;
  --color-3: #cf5600;
  --color-4: #a8bd33;
  --color-5: #191a16;
}

SCSS

$color-1: #2d6b8c;
$color-2: #33a387;
$color-3: #cf5600;
$color-4: #a8bd33;
$color-5: #191a16;

TAILWIND

colors: {
  'brand-1': '#2d6b8c',
  'brand-2': '#33a387',
  'brand-3': '#cf5600',
  'brand-4': '#a8bd33',
  'brand-5': '#191a16',
}

RGB Array

[45, 107, 140], [51, 163, 135], [207, 86, 0], [168, 189, 51], [25, 26, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2D6B8C, #33A387, #CF5600, #A8BD33, #191A16 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: #2d6b8c; --color-2: #33a387; --color-3: #cf5600; --color-4: #a8bd33; --color-5: #191a16. 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 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