← Back to Editor

#C7FFF8 · #4FFFD3 · #FFFB0D · #FF7C3B · #743DB8

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

#C7FFF8

Jade · Lavender · Glacier Blue

HEX
#C7FFF8
RGB
rgb(199, 255, 248)
HSL
hsl(173, 100%, 89%)
HSB
hsb(173, 22%, 100%)
CMYK
cmyk(22%, 0%, 3%, 0%)
Oklch
oklch(96.0% 0.057 186.8)

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

#4FFFD3

Jade · Turquoise · Lake Green

HEX
#4FFFD3
RGB
rgb(79, 255, 211)
HSL
hsl(165, 100%, 65%)
HSB
hsb(165, 69%, 100%)
CMYK
cmyk(69%, 0%, 17%, 0%)
Oklch
oklch(90.1% 0.155 172.3)

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

#FFFB0D

Autumn Sage · Yellow · Sunflower

HEX
#FFFB0D
RGB
rgb(255, 251, 13)
HSL
hsl(59, 100%, 53%)
HSB
hsb(59, 95%, 100%)
CMYK
cmyk(0%, 2%, 95%, 0%)
Oklch
oklch(96.0% 0.206 108.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FF7C3B

Apricot · Coral · Warm Sun

HEX
#FF7C3B
RGB
rgb(255, 124, 59)
HSL
hsl(20, 100%, 62%)
HSB
hsb(20, 77%, 100%)
CMYK
cmyk(0%, 51%, 77%, 0%)
Oklch
oklch(72.9% 0.177 44.5)

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

#743DB8

Deep Indigo · SlateBlue · Violet

HEX
#743DB8
RGB
rgb(116, 61, 184)
HSL
hsl(267, 50%, 48%)
HSB
hsb(267, 67%, 72%)
CMYK
cmyk(37%, 67%, 0%, 28%)
Oklch
oklch(49.3% 0.185 300.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C7FFF8
FFC7CD

Analogous

C7FFDC
C7FFF8
C7E9FF

Triadic

C7FFF8
F8C7FF
FFF8C7

Split-Comp.

C7FFF8
FFC7E9
FFDCC7

Tetradic

C7FFF8
DCC7FF
FFC7CD
E9FFC7

Contrast Matrix WCAG 2.1 Contrast

C7FFF8
4FFFD3
FFFB0D
FF7C3B
743DB8
—
1.2
Fail
1.0
Fail
2.3
Fail
6.2
AA
1.2
Fail
—
1.1
Fail
2.0
Fail
5.3
AA
1.0
Fail
1.1
Fail
—
2.3
Fail
6.1
AA
2.3
Fail
2.0
Fail
2.3
Fail
—
2.6
Fail
6.2
AA
5.3
AA
6.1
AA
2.6
Fail
—
White BG
1.1Fail
1.3Fail
1.1Fail
2.6Fail
6.8AA
Black BG
19.1AAA
16.6AAA
19.1AAA
8.2AAA
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFE0FA
9B9DDE
FDFD47
C6C54B
5C5C9A

Deuteranopia

DCD8FA
9184E0
FEFE54
CED84F
5F6393

Tritanopia

CAFBFB
58E6E8
FF747E
F8575A
71837E

Achromatopsia

EDEDED
C5C5C5
E1E1E1
9C9C9C
5B5B5B

Shades & Tints Shades & Tints

#C7FFF8

Dark
Light

#4FFFD3

Dark
Light

#FFFB0D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c7fff8;
  --color-2: #4fffd3;
  --color-3: #fffb0d;
  --color-4: #ff7c3b;
  --color-5: #743db8;
}

SCSS

$color-1: #c7fff8;
$color-2: #4fffd3;
$color-3: #fffb0d;
$color-4: #ff7c3b;
$color-5: #743db8;

TAILWIND

colors: {
  'brand-1': '#c7fff8',
  'brand-2': '#4fffd3',
  'brand-3': '#fffb0d',
  'brand-4': '#ff7c3b',
  'brand-5': '#743db8',
}

RGB Array

[199, 255, 248], [79, 255, 211], [255, 251, 13], [255, 124, 59], [116, 61, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C7FFF8, #4FFFD3, #FFFB0D, #FF7C3B, #743DB8 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: #c7fff8; --color-2: #4fffd3; --color-3: #fffb0d; --color-4: #ff7c3b; --color-5: #743db8. 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