#33B5A8 + #4A2B18 + #915C3A + #A68D7E + #3A787A · coffee - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#33B5A8

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#33B5A8

RGB

rgb(51, 181, 168)

HSL

hsl(174, 56%, 45%)

HSB

hsb(174, 72%, 71%)

CMYK

cmyk(72%, 0%, 7%, 29%)

Oklch

oklch(70.1% 0.111 185.1)

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

#4A2B18

Tangerine · DarkOliveGreen · Cinnamon

HEX

#4A2B18

RGB

rgb(74, 43, 24)

HSL

hsl(23, 51%, 19%)

HSB

hsb(23, 68%, 29%)

CMYK

cmyk(0%, 42%, 68%, 71%)

Oklch

oklch(32.4% 0.055 51.2)

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

#915C3A

Tangerine · Sienna · Amber Brown

HEX

#915C3A

RGB

rgb(145, 92, 58)

HSL

hsl(23, 43%, 40%)

HSB

hsb(23, 60%, 57%)

CMYK

cmyk(0%, 37%, 60%, 43%)

Oklch

oklch(52.6% 0.085 52.6)

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

#A68D7E

Tangerine · Gray · Warm Sun

HEX

#A68D7E

RGB

rgb(166, 141, 126)

HSL

hsl(23, 18%, 57%)

HSB

hsb(23, 24%, 65%)

CMYK

cmyk(0%, 15%, 24%, 35%)

Oklch

oklch(66.2% 0.037 52.8)

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

#3A787A

Slate Blue · SeaGreen · Mint Ice

HEX

#3A787A

RGB

rgb(58, 120, 122)

HSL

hsl(182, 36%, 35%)

HSB

hsb(182, 52%, 48%)

CMYK

cmyk(52%, 2%, 0%, 52%)

Oklch

oklch(53.3% 0.064 198.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33B5A8

B3323F

Analogous

32B366

33B5A8

3280B3

Triadic

33B5A8

A632B3

B3A632

Split-Comp.

33B5A8

B33280

B36632

Tetradic

33B5A8

6632B3

B3323F

80B332

Contrast Matrix WCAG 2.1 Contrast

33B5A8	4A2B18	915C3A	A68D7E	3A787A
—	5.0 AA	2.2 Fail	1.2 Fail	2.0 Fail
5.0 AA	—	2.3 Fail	4.1 AA Large	2.5 Fail
2.2 Fail	2.3 Fail	—	1.8 Fail	1.1 Fail
1.2 Fail	4.1 AA Large	1.8 Fail	—	1.6 Fail
2.0 Fail	2.5 Fail	1.1 Fail	1.6 Fail	—

White BG

2.5Fail

12.7AAA

5.5AA

3.1AA Large

5.1AA

Black BG

8.3AAA

1.6Fail

3.8AA Large

6.7AA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6CAB

3D3C1D

7A7A42

9B9B82

55557A

Deuteranopia

645AAC

3E411E

7D8144

9D9F83

514D79

Tritanopia

3AAEAE

482021

8E494A

A58485

3D7979

Achromatopsia

8D8D8D

323232

686868

939393

666666

Shades & Tints Shades & Tints

#33B5A8

Dark

Light

#4A2B18

Dark

Light

#915C3A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33b5a8;
  --color-2: #4a2b18;
  --color-3: #915c3a;
  --color-4: #a68d7e;
  --color-5: #3a787a;
}

SCSS

$color-1: #33b5a8;
$color-2: #4a2b18;
$color-3: #915c3a;
$color-4: #a68d7e;
$color-5: #3a787a;

TAILWIND

colors: {
  'brand-1': '#33b5a8',
  'brand-2': '#4a2b18',
  'brand-3': '#915c3a',
  'brand-4': '#a68d7e',
  'brand-5': '#3a787a',
}

RGB Array

[51, 181, 168], [74, 43, 24], [145, 92, 58], [166, 141, 126], [58, 120, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This coffee-style palette of #33B5A8, #4A2B18, #915C3A, #A68D7E, #3A787A 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: #33b5a8; --color-2: #4a2b18; --color-3: #915c3a; --color-4: #a68d7e; --color-5: #3a787a. 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 coffee-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