← Back to Editor

#A7D9D3 · #FC4508 · #9E3816 · #044740 · #0B3631

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#A7D9D3

Jade · LightBlue · Lake Green

HEX
#A7D9D3
RGB
rgb(167, 217, 211)
HSL
hsl(173, 40%, 75%)
HSB
hsb(173, 23%, 85%)
CMYK
cmyk(23%, 0%, 3%, 15%)
Oklch
oklch(84.9% 0.052 187.1)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#FC4508

Tangerine · OrangeRed · Warm Sun

HEX
#FC4508
RGB
rgb(252, 69, 8)
HSL
hsl(15, 98%, 51%)
HSB
hsb(15, 97%, 99%)
CMYK
cmyk(0%, 73%, 97%, 1%)
Oklch
oklch(65.5% 0.226 35.1)

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

#9E3816

Tangerine · Brown · Amber Brown

HEX
#9E3816
RGB
rgb(158, 56, 22)
HSL
hsl(15, 76%, 35%)
HSB
hsb(15, 86%, 62%)
CMYK
cmyk(0%, 65%, 86%, 38%)
Oklch
oklch(48.2% 0.143 37.6)

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

#044740

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#044740
RGB
rgb(4, 71, 64)
HSL
hsl(174, 89%, 15%)
HSB
hsb(174, 94%, 28%)
CMYK
cmyk(94%, 0%, 10%, 72%)
Oklch
oklch(35.8% 0.062 183.6)

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

#0B3631

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0B3631
RGB
rgb(11, 54, 49)
HSL
hsl(173, 66%, 13%)
HSB
hsb(173, 80%, 21%)
CMYK
cmyk(80%, 0%, 9%, 79%)
Oklch
oklch(30.3% 0.047 183.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7D9D3
D9A6AC

Analogous

A6D9B9
A7D9D3
A6C5D9

Triadic

A7D9D3
D3A6D9
D9D3A6

Split-Comp.

A7D9D3
D9A6C5
D9B9A6

Tetradic

A7D9D3
B9A6D9
D9A6AC
C5D9A6

Contrast Matrix WCAG 2.1 Contrast

A7D9D3
FC4508
9E3816
044740
0B3631
—
2.3
Fail
4.5
AA Large
6.8
AA
8.5
AAA
2.3
Fail
—
2.0
Fail
3.0
AA Large
3.8
AA Large
4.5
AA Large
2.0
Fail
—
1.5
Fail
1.9
Fail
6.8
AA
3.0
AA Large
1.5
Fail
—
1.2
Fail
8.5
AAA
3.8
AA Large
1.9
Fail
1.2
Fail
—
White BG
1.6Fail
3.5AA Large
6.9AA
10.6AAA
13.2AAA
Black BG
13.5AAA
6.0AA
3.0AA Large
2.0Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBDD4
ADAB17
72711E
212242
1E1E32

Deuteranopia

BAB6D5
B7C51A
787F20
1D1842
1B1833

Tritanopia

AAD6D6
F32225
992526
074343
0D3333

Achromatopsia

C9C9C9
757575
535353
323232
292929

Shades & Tints Shades & Tints

#A7D9D3

Dark
Light

#FC4508

Dark
Light

#9E3816

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7d9d3;
  --color-2: #fc4508;
  --color-3: #9e3816;
  --color-4: #044740;
  --color-5: #0b3631;
}

SCSS

$color-1: #a7d9d3;
$color-2: #fc4508;
$color-3: #9e3816;
$color-4: #044740;
$color-5: #0b3631;

TAILWIND

colors: {
  'brand-1': '#a7d9d3',
  'brand-2': '#fc4508',
  'brand-3': '#9e3816',
  'brand-4': '#044740',
  'brand-5': '#0b3631',
}

RGB Array

[167, 217, 211], [252, 69, 8], [158, 56, 22], [4, 71, 64], [11, 54, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7D9D3, #FC4508, #9E3816, #044740, #0B3631 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a7d9d3; --color-2: #fc4508; --color-3: #9e3816; --color-4: #044740; --color-5: #0b3631. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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