← Back to Editor

#7BBADB · #9CD7FF · #FFF1D4 · #FFD582 · #FFAD5C

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

#7BBADB

Sky Blue · SkyBlue · Cobalt Blue

HEX
#7BBADB
RGB
rgb(123, 186, 219)
HSL
hsl(201, 57%, 67%)
HSB
hsb(201, 44%, 86%)
CMYK
cmyk(44%, 15%, 0%, 14%)
Oklch
oklch(75.8% 0.080 232.1)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#9CD7FF

Sky Blue · LightSkyBlue · Sky Blue

HEX
#9CD7FF
RGB
rgb(156, 215, 255)
HSL
hsl(204, 100%, 81%)
HSB
hsb(204, 39%, 100%)
CMYK
cmyk(39%, 16%, 0%, 0%)
Oklch
oklch(85.3% 0.082 238.6)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#FFF1D4

Goose Yellow · Beige · Lemon Cream

HEX
#FFF1D4
RGB
rgb(255, 241, 212)
HSL
hsl(40, 100%, 92%)
HSB
hsb(40, 17%, 100%)
CMYK
cmyk(0%, 5%, 17%, 0%)
Oklch
oklch(96.2% 0.041 85.3)

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

#FFD582

Goose Yellow · Khaki · Sunflower

HEX
#FFD582
RGB
rgb(255, 213, 130)
HSL
hsl(40, 100%, 75%)
HSB
hsb(40, 49%, 100%)
CMYK
cmyk(0%, 16%, 49%, 0%)
Oklch
oklch(89.2% 0.112 83.4)

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

#FFAD5C

Ginger · SandyBrown · Warm Sun

HEX
#FFAD5C
RGB
rgb(255, 173, 92)
HSL
hsl(30, 100%, 68%)
HSB
hsb(30, 64%, 100%)
CMYK
cmyk(0%, 32%, 64%, 0%)
Oklch
oklch(81.2% 0.136 63.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7BBADB
DB9C7B

Analogous

7BDBCC
7BBADB
7B89DB

Triadic

7BBADB
DB7BB9
B9DB7B

Split-Comp.

7BBADB
DB7B89
DBCC7B

Tetradic

7BBADB
CC7BDB
DB9C7B
89DB7B

Contrast Matrix WCAG 2.1 Contrast

7BBADB
9CD7FF
FFF1D4
FFD582
FFAD5C
—
1.4
Fail
1.9
Fail
1.5
Fail
1.2
Fail
1.4
Fail
—
1.4
Fail
1.1
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
1.5
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.2
Fail
1.2
Fail
1.7
Fail
1.3
Fail
—
White BG
2.1Fail
1.5Fail
1.1Fail
1.4Fail
1.8Fail
Black BG
9.9AAA
13.6AAA
18.8AAA
15.1AAA
11.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9697D3
B6B6F5
F9F9DB
EDEC96
DBDB70

Deuteranopia

938ED1
B2AEF3
FAFBDD
EFF29B
E0E674

Tritanopia

7ECDCB
9FEEEC
FEE1E2
FDA6A9
FB7F82

Achromatopsia

ABABAB
CACACA
F2F2F2
D8D8D8
BCBCBC

Shades & Tints Shades & Tints

#7BBADB

Dark
Light

#9CD7FF

Dark
Light

#FFF1D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7bbadb;
  --color-2: #9cd7ff;
  --color-3: #fff1d4;
  --color-4: #ffd582;
  --color-5: #ffad5c;
}

SCSS

$color-1: #7bbadb;
$color-2: #9cd7ff;
$color-3: #fff1d4;
$color-4: #ffd582;
$color-5: #ffad5c;

TAILWIND

colors: {
  'brand-1': '#7bbadb',
  'brand-2': '#9cd7ff',
  'brand-3': '#fff1d4',
  'brand-4': '#ffd582',
  'brand-5': '#ffad5c',
}

RGB Array

[123, 186, 219], [156, 215, 255], [255, 241, 212], [255, 213, 130], [255, 173, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7BBADB, #9CD7FF, #FFF1D4, #FFD582, #FFAD5C 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: #7bbadb; --color-2: #9cd7ff; --color-3: #fff1d4; --color-4: #ffd582; --color-5: #ffad5c. 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