← Back to Editor

#44AA99 · #FFFFCC · #665544 · #FC4E56 · #DABE83

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

#44AA99

Mineral Blue · CadetBlue · Mint Ice

HEX
#44AA99
RGB
rgb(68, 170, 153)
HSL
hsl(170, 43%, 47%)
HSB
hsb(170, 60%, 67%)
CMYK
cmyk(60%, 0%, 10%, 33%)
Oklch
oklch(67.4% 0.098 180.4)

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

#FFFFCC

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFCC
RGB
rgb(255, 255, 204)
HSL
hsl(60, 100%, 90%)
HSB
hsb(60, 20%, 100%)
CMYK
cmyk(0%, 0%, 20%, 0%)
Oklch
oklch(98.8% 0.065 107.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#665544

Ochre · DarkOliveGreen · Amber Brown

HEX
#665544
RGB
rgb(102, 85, 68)
HSL
hsl(30, 20%, 33%)
HSB
hsb(30, 33%, 40%)
CMYK
cmyk(0%, 17%, 33%, 60%)
Oklch
oklch(46.2% 0.035 66.8)

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

#FC4E56

Peach Pink · Tomato · Coral Red

HEX
#FC4E56
RGB
rgb(252, 78, 86)
HSL
hsl(357, 97%, 65%)
HSB
hsb(357, 69%, 99%)
CMYK
cmyk(0%, 69%, 66%, 1%)
Oklch
oklch(67.0% 0.210 22.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DABE83

Ginger · BurlyWood · Sunflower

HEX
#DABE83
RGB
rgb(218, 190, 131)
HSL
hsl(41, 54%, 68%)
HSB
hsb(41, 40%, 85%)
CMYK
cmyk(0%, 13%, 40%, 15%)
Oklch
oklch(81.2% 0.083 85.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

44AA99
AB4455

Analogous

44AB67
44AA99
4489AB

Triadic

44AA99
9A44AB
AB9A44

Split-Comp.

44AA99
AB4489
AB6744

Tetradic

44AA99
6744AB
AB4455
89AB44

Contrast Matrix WCAG 2.1 Contrast

44AA99
FFFFCC
665544
FC4E56
DABE83
—
2.7
Fail
2.5
Fail
1.2
Fail
1.6
Fail
2.7
Fail
—
6.9
AA
3.2
AA Large
1.7
Fail
2.5
Fail
6.9
AA
—
2.2
Fail
4.0
AA Large
1.2
Fail
3.2
AA Large
2.2
Fail
—
1.8
Fail
1.6
Fail
1.7
Fail
4.0
AA Large
1.8
Fail
—
White BG
2.8Fail
1.0Fail
7.1AAA
3.3AA Large
1.8Fail
Black BG
7.5AAA
20.4AAA
2.9Fail
6.4AA
11.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

70719D
FFFFD8
5F5E48
B1AF54
CECE91

Deuteranopia

6A639E
FFFFDB
606149
BBC854
D0D295

Tritanopia

49A0A1
FFE2E4
654B4C
F35352
D99D9F

Achromatopsia

8A8A8A
F9F9F9
585858
838383
C0C0C0

Shades & Tints Shades & Tints

#44AA99

Dark
Light

#FFFFCC

Dark
Light

#665544

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #44aa99;
  --color-2: #ffffcc;
  --color-3: #665544;
  --color-4: #fc4e56;
  --color-5: #dabe83;
}

SCSS

$color-1: #44aa99;
$color-2: #ffffcc;
$color-3: #665544;
$color-4: #fc4e56;
$color-5: #dabe83;

TAILWIND

colors: {
  'brand-1': '#44aa99',
  'brand-2': '#ffffcc',
  'brand-3': '#665544',
  'brand-4': '#fc4e56',
  'brand-5': '#dabe83',
}

RGB Array

[68, 170, 153], [255, 255, 204], [102, 85, 68], [252, 78, 86], [218, 190, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #44AA99, #FFFFCC, #665544, #FC4E56, #DABE83 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #44aa99; --color-2: #ffffcc; --color-3: #665544; --color-4: #fc4e56; --color-5: #dabe83. 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. 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