← Back to Editor

#FF3700 · #CC5F2E · #99875C · #66AF89 · #33D6B6

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 Library

Color Details Color Details

#FF3700

Vermilion · OrangeRed · Passion Red

HEX
#FF3700
RGB
rgb(255, 55, 0)
HSL
hsl(13, 100%, 50%)
HSB
hsb(13, 100%, 100%)
CMYK
cmyk(0%, 78%, 100%, 0%)
Oklch
oklch(64.9% 0.239 33.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#CC5F2E

Tangerine · Chocolate · Amber Brown

HEX
#CC5F2E
RGB
rgb(204, 95, 46)
HSL
hsl(19, 63%, 49%)
HSB
hsb(19, 77%, 80%)
CMYK
cmyk(0%, 53%, 77%, 20%)
Oklch
oklch(61.2% 0.152 42.8)

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

#99875C

Ochre · Gray · Honey Gold

HEX
#99875C
RGB
rgb(153, 135, 92)
HSL
hsl(42, 25%, 48%)
HSB
hsb(42, 40%, 60%)
CMYK
cmyk(0%, 12%, 40%, 40%)
Oklch
oklch(62.9% 0.063 87.8)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#66AF89

Celadon · CadetBlue · Olive Green

HEX
#66AF89
RGB
rgb(102, 175, 137)
HSL
hsl(149, 31%, 54%)
HSB
hsb(149, 42%, 69%)
CMYK
cmyk(42%, 0%, 22%, 31%)
Oklch
oklch(69.5% 0.093 159.9)

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

#33D6B6

Mineral Blue · Turquoise · Lake Green

HEX
#33D6B6
RGB
rgb(51, 214, 182)
HSL
hsl(168, 67%, 52%)
HSB
hsb(168, 76%, 84%)
CMYK
cmyk(76%, 0%, 15%, 16%)
Oklch
oklch(78.8% 0.137 175.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3700
00C8FF

Analogous

FF0048
FF3700
FFB700

Triadic

FF3700
00FF37
3700FF

Split-Comp.

FF3700
00FFB7
0048FF

Tetradic

FF3700
48FF00
00C8FF
B700FF

Contrast Matrix WCAG 2.1 Contrast

FF3700
CC5F2E
99875C
66AF89
33D6B6
—
1.1
Fail
1.0
Fail
1.4
Fail
2.0
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
2.2
Fail
1.0
Fail
1.1
Fail
—
1.3
Fail
1.9
Fail
1.4
Fail
1.5
Fail
1.3
Fail
—
1.4
Fail
2.0
Fail
2.2
Fail
1.9
Fail
1.4
Fail
—
White BG
3.6AA Large
4.0AA Large
3.5AA Large
2.6Fail
1.8Fail
Black BG
5.8AA
5.2AA
6.0AA
8.1AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A70D
9D9C3A
919166
868692
7A7BBE

Deuteranopia

B4C311
A3AB3D
929469
817C94
7064C0

Tritanopia

F5181A
C74345
986F70
6A999B
3BC4C5

Achromatopsia

6D6D6D
7A7A7A
878787
959595
A2A2A2

Shades & Tints Shades & Tints

#FF3700

Dark
Light

#CC5F2E

Dark
Light

#99875C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3700;
  --color-2: #cc5f2e;
  --color-3: #99875c;
  --color-4: #66af89;
  --color-5: #33d6b6;
}

SCSS

$color-1: #ff3700;
$color-2: #cc5f2e;
$color-3: #99875c;
$color-4: #66af89;
$color-5: #33d6b6;

TAILWIND

colors: {
  'brand-1': '#ff3700',
  'brand-2': '#cc5f2e',
  'brand-3': '#99875c',
  'brand-4': '#66af89',
  'brand-5': '#33d6b6',
}

RGB Array

[255, 55, 0], [204, 95, 46], [153, 135, 92], [102, 175, 137], [51, 214, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3700, #CC5F2E, #99875C, #66AF89, #33D6B6 is ideal for: corporate websites, product showcases, portfolios. 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: #ff3700; --color-2: #cc5f2e; --color-3: #99875c; --color-4: #66af89; --color-5: #33d6b6. 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. 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