← Back to Editor

#FF7D12 · #FFB163 · #F2DEA0 · #DFF2E5 · #C3EBE3

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 App

Color Details Color Details

#FF7D12

Tangerine · Orange · Warm Sun

HEX
#FF7D12
RGB
rgb(255, 125, 18)
HSL
hsl(27, 100%, 54%)
HSB
hsb(27, 93%, 100%)
CMYK
cmyk(0%, 51%, 93%, 0%)
Oklch
oklch(72.8% 0.186 50.8)

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

#FFB163

Ginger · SandyBrown · Warm Sun

HEX
#FFB163
RGB
rgb(255, 177, 99)
HSL
hsl(30, 100%, 69%)
HSB
hsb(30, 61%, 100%)
CMYK
cmyk(0%, 31%, 61%, 0%)
Oklch
oklch(82.0% 0.131 64.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#F2DEA0

Goose Yellow · Wheat · Lemon Cream

HEX
#F2DEA0
RGB
rgb(242, 222, 160)
HSL
hsl(45, 76%, 79%)
HSB
hsb(45, 34%, 95%)
CMYK
cmyk(0%, 8%, 34%, 5%)
Oklch
oklch(90.2% 0.082 92.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#DFF2E5

Celadon · Beige · Mint Green

HEX
#DFF2E5
RGB
rgb(223, 242, 229)
HSL
hsl(139, 42%, 91%)
HSB
hsb(139, 8%, 95%)
CMYK
cmyk(8%, 0%, 5%, 5%)
Oklch
oklch(94.4% 0.026 156.0)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#C3EBE3

Jade · LightBlue · Glacier Blue

HEX
#C3EBE3
RGB
rgb(195, 235, 227)
HSL
hsl(168, 50%, 84%)
HSB
hsb(168, 17%, 92%)
CMYK
cmyk(17%, 0%, 3%, 8%)
Oklch
oklch(90.9% 0.043 181.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF7D12
1495FF

Analogous

FF1420
FF7D12
FFF314

Triadic

FF7D12
14FF7E
7E14FF

Split-Comp.

FF7D12
14FFF3
1420FF

Tetradic

FF7D12
20FF14
1495FF
F314FF

Contrast Matrix WCAG 2.1 Contrast

FF7D12
FFB163
F2DEA0
DFF2E5
C3EBE3
—
1.4
Fail
1.9
Fail
2.2
Fail
2.0
Fail
1.4
Fail
—
1.3
Fail
1.5
Fail
1.4
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.0
Fail
2.2
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
2.0
Fail
1.4
Fail
1.0
Fail
1.1
Fail
—
White BG
2.6Fail
1.8Fail
1.3Fail
1.2Fail
1.3Fail
Black BG
8.2AAA
11.7AAA
15.7AAA
18.0AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C62C
DDDD76
E9E9AF
E7E7E8
D4D5E5

Deuteranopia

CED832
E2E87A
EBECB3
E6E5E9
D2CFE5

Tritanopia

F94045
FB8588
F1BBBD
E0EBEB
C5E6E7

Achromatopsia

989898
BFBFBF
DDDDDD
EBEBEB
DEDEDE

Shades & Tints Shades & Tints

#FF7D12

Dark
Light

#FFB163

Dark
Light

#F2DEA0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff7d12;
  --color-2: #ffb163;
  --color-3: #f2dea0;
  --color-4: #dff2e5;
  --color-5: #c3ebe3;
}

SCSS

$color-1: #ff7d12;
$color-2: #ffb163;
$color-3: #f2dea0;
$color-4: #dff2e5;
$color-5: #c3ebe3;

TAILWIND

colors: {
  'brand-1': '#ff7d12',
  'brand-2': '#ffb163',
  'brand-3': '#f2dea0',
  'brand-4': '#dff2e5',
  'brand-5': '#c3ebe3',
}

RGB Array

[255, 125, 18], [255, 177, 99], [242, 222, 160], [223, 242, 229], [195, 235, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF7D12, #FFB163, #F2DEA0, #DFF2E5, #C3EBE3 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #ff7d12; --color-2: #ffb163; --color-3: #f2dea0; --color-4: #dff2e5; --color-5: #c3ebe3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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