#3B2410 + #32573E + #298B6C + #20BF99 + #18F3C6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3B2410

Tangerine · Black · Cinnamon

HEX

#3B2410

RGB

rgb(59, 36, 16)

HSL

hsl(28, 57%, 15%)

HSB

hsb(28, 73%, 23%)

CMYK

cmyk(0%, 39%, 73%, 77%)

Oklch

oklch(28.5% 0.047 60.1)

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

#32573E

Celadon · DarkSlateGray · Forest Green

HEX

#32573E

RGB

rgb(50, 87, 62)

HSL

hsl(139, 27%, 27%)

HSB

hsb(139, 43%, 34%)

CMYK

cmyk(43%, 0%, 29%, 66%)

Oklch

oklch(42.1% 0.060 153.6)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#298B6C

Mineral Blue · SeaGreen · Mint Ice

HEX

#298B6C

RGB

rgb(41, 139, 108)

HSL

hsl(161, 54%, 35%)

HSB

hsb(161, 71%, 55%)

CMYK

cmyk(71%, 0%, 22%, 45%)

Oklch

oklch(57.2% 0.102 167.6)

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

#20BF99

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#20BF99

RGB

rgb(32, 191, 153)

HSL

hsl(166, 71%, 44%)

HSB

hsb(166, 83%, 75%)

CMYK

cmyk(83%, 0%, 20%, 25%)

Oklch

oklch(71.9% 0.135 171.0)

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

#18F3C6

Mineral Blue · Turquoise · Lake Green

HEX

#18F3C6

RGB

rgb(24, 243, 198)

HSL

hsl(168, 90%, 52%)

HSB

hsb(168, 90%, 95%)

CMYK

cmyk(90%, 0%, 19%, 5%)

Oklch

oklch(86.0% 0.163 172.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B2410

10283C

Analogous

3C1012

3B2410

3C3B10

Triadic

3B2410

103C25

25103C

Split-Comp.

3B2410

103C3B

10123C

Tetradic

3B2410

123C10

10283C

3B103C

Contrast Matrix WCAG 2.1 Contrast

3B2410	32573E	298B6C	20BF99	18F3C6
—	1.8 Fail	3.5 AA Large	6.2 AA	10.1 AAA
1.8 Fail	—	1.9 Fail	3.5 AA Large	5.7 AA
3.5 AA Large	1.9 Fail	—	1.8 Fail	2.9 Fail
6.2 AA	3.5 AA Large	1.8 Fail	—	1.6 Fail
10.1 AAA	5.7 AA	2.9 Fail	1.6 Fail	—

White BG

14.5AAA

8.2AAA

4.2AA Large

2.3Fail

1.4Fail

Black BG

1.4Fail

2.6Fail

5.0AA

9.0AAA

14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313115

424244

535474

6566A2

7779D1

Deuteranopia

323416

403D46

4E4675

5C50A4

6A5AD4

Tritanopia

3A191A

34494A

2E797B

28A9AB

23D9DB

Achromatopsia

292929

494949

6A6A6A

8B8B8B

ACACAC

Shades & Tints Shades & Tints

#3B2410

Dark

Light

#32573E

Dark

Light

#298B6C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b2410;
  --color-2: #32573e;
  --color-3: #298b6c;
  --color-4: #20bf99;
  --color-5: #18f3c6;
}

SCSS

$color-1: #3b2410;
$color-2: #32573e;
$color-3: #298b6c;
$color-4: #20bf99;
$color-5: #18f3c6;

TAILWIND

colors: {
  'brand-1': '#3b2410',
  'brand-2': '#32573e',
  'brand-3': '#298b6c',
  'brand-4': '#20bf99',
  'brand-5': '#18f3c6',
}

RGB Array

[59, 36, 16], [50, 87, 62], [41, 139, 108], [32, 191, 153], [24, 243, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B2410, #32573E, #298B6C, #20BF99, #18F3C6 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: #3b2410; --color-2: #32573e; --color-3: #298b6c; --color-4: #20bf99; --color-5: #18f3c6. 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