← Back to Editor

#FFFFF1 · #CC763D · #081A1A · #F9C593 · #27BAC4

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

#FFFFF1

Fresh Green · Snow · Lemon Cream

HEX
#FFFFF1
RGB
rgb(255, 255, 241)
HSL
hsl(60, 100%, 97%)
HSB
hsb(60, 5%, 100%)
CMYK
cmyk(0%, 0%, 5%, 0%)
Oklch
oklch(99.6% 0.018 106.7)

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

#CC763D

Tangerine · Chocolate · Warm Sun

HEX
#CC763D
RGB
rgb(204, 118, 61)
HSL
hsl(24, 58%, 52%)
HSB
hsb(24, 70%, 80%)
CMYK
cmyk(0%, 42%, 70%, 20%)
Oklch
oklch(65.0% 0.129 51.9)

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

#081A1A

Lake Blue · Black · Peacock Green

HEX
#081A1A
RGB
rgb(8, 26, 26)
HSL
hsl(180, 53%, 7%)
HSB
hsb(180, 69%, 10%)
CMYK
cmyk(69%, 0%, 0%, 90%)
Oklch
oklch(20.2% 0.024 195.4)

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

#F9C593

Apricot · BurlyWood · Peach Orange

HEX
#F9C593
RGB
rgb(249, 197, 147)
HSL
hsl(29, 89%, 78%)
HSB
hsb(29, 41%, 98%)
CMYK
cmyk(0%, 21%, 41%, 2%)
Oklch
oklch(85.8% 0.088 65.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#27BAC4

Lake Blue · LightSeaGreen · Mint Ice

HEX
#27BAC4
RGB
rgb(39, 186, 196)
HSL
hsl(184, 67%, 46%)
HSB
hsb(184, 80%, 77%)
CMYK
cmyk(80%, 5%, 0%, 23%)
Oklch
oklch(72.1% 0.116 202.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFF1
F0F0FF

Analogous

FFF7F0
FFFFF1
F7FFF0

Triadic

FFFFF1
F0FFFF
FFF0FF

Split-Comp.

FFFFF1
F0F7FF
F7F0FF

Tetradic

FFFFF1
F0FFF7
F0F0FF
FFF0F7

Contrast Matrix WCAG 2.1 Contrast

FFFFF1
CC763D
081A1A
F9C593
27BAC4
—
3.3
AA Large
17.8
AAA
1.6
Fail
2.3
Fail
3.3
AA Large
—
5.3
AA
2.2
Fail
1.4
Fail
17.8
AAA
5.3
AA
—
11.5
AAA
7.6
AAA
1.6
Fail
2.2
Fail
11.5
AAA
—
1.5
Fail
2.3
Fail
1.4
Fail
7.6
AAA
1.5
Fail
—
White BG
1.0Fail
3.4AA Large
17.9AAA
1.6Fail
2.4Fail
Black BG
20.8AAA
6.2AA
1.2Fail
13.4AAA
8.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFF4
A7A64B
10101A
E2E29F
6768C2

Deuteranopia

FFFFF5
ACB24E
0F0D1A
E6E9A2
5E53C1

Tritanopia

FFF7F8
C85658
091A1A
F6A9AB
2EC0BF

Achromatopsia

FDFDFD
898989
151515
CFCFCF
8F8F8F

Shades & Tints Shades & Tints

#FFFFF1

Dark
Light

#CC763D

Dark
Light

#081A1A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffff1;
  --color-2: #cc763d;
  --color-3: #081a1a;
  --color-4: #f9c593;
  --color-5: #27bac4;
}

SCSS

$color-1: #fffff1;
$color-2: #cc763d;
$color-3: #081a1a;
$color-4: #f9c593;
$color-5: #27bac4;

TAILWIND

colors: {
  'brand-1': '#fffff1',
  'brand-2': '#cc763d',
  'brand-3': '#081a1a',
  'brand-4': '#f9c593',
  'brand-5': '#27bac4',
}

RGB Array

[255, 255, 241], [204, 118, 61], [8, 26, 26], [249, 197, 147], [39, 186, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFFF1, #CC763D, #081A1A, #F9C593, #27BAC4 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: #fffff1; --color-2: #cc763d; --color-3: #081a1a; --color-4: #f9c593; --color-5: #27bac4. 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