#F11856 + #ADD6DB + #A7E2E7 + #5FACB3 + #448999 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F11856

Dark Violet · Crimson · Rose Pink

HEX

#F11856

RGB

rgb(241, 24, 86)

HSL

hsl(343, 89%, 52%)

HSB

hsb(343, 90%, 95%)

CMYK

cmyk(0%, 90%, 64%, 5%)

Oklch

oklch(61.5% 0.237 14.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#ADD6DB

Sky Blue · LightBlue · Glacier Blue

HEX

#ADD6DB

RGB

rgb(173, 214, 219)

HSL

hsl(187, 39%, 77%)

HSB

hsb(187, 21%, 86%)

CMYK

cmyk(21%, 2%, 0%, 14%)

Oklch

oklch(84.8% 0.044 205.5)

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

#A7E2E7

Sky Blue · LightBlue · Glacier Blue

HEX

#A7E2E7

RGB

rgb(167, 226, 231)

HSL

hsl(185, 57%, 78%)

HSB

hsb(185, 28%, 91%)

CMYK

cmyk(28%, 2%, 0%, 9%)

Oklch

oklch(87.4% 0.060 202.7)

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

#5FACB3

Slate Blue · CadetBlue · Lake Green

HEX

#5FACB3

RGB

rgb(95, 172, 179)

HSL

hsl(185, 36%, 54%)

HSB

hsb(185, 47%, 70%)

CMYK

cmyk(47%, 4%, 0%, 30%)

Oklch

oklch(69.8% 0.077 203.2)

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

#448999

Slate Blue · SteelBlue · Mint Ice

HEX

#448999

RGB

rgb(68, 137, 153)

HSL

hsl(191, 38%, 43%)

HSB

hsb(191, 56%, 60%)

CMYK

cmyk(56%, 10%, 0%, 40%)

Oklch

oklch(59.2% 0.073 214.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F11856

18F2B4

Analogous

F218C2

F11856

F24718

Triadic

F11856

55F218

1855F2

Split-Comp.

F11856

18F247

18C2F2

Tetradic

F11856

C2F218

18F2B4

4718F2

Contrast Matrix WCAG 2.1 Contrast

F11856	ADD6DB	A7E2E7	5FACB3	448999
—	2.7 Fail	2.9 Fail	1.6 Fail	1.1 Fail
2.7 Fail	—	1.1 Fail	1.7 Fail	2.5 Fail
2.9 Fail	1.1 Fail	—	1.8 Fail	2.8 Fail
1.6 Fail	1.7 Fail	1.8 Fail	—	1.5 Fail
1.1 Fail	2.5 Fail	2.8 Fail	1.5 Fail	—

White BG

4.2AA Large

1.6Fail

1.4Fail

2.6Fail

4.0AA Large

Black BG

5.0AA

13.4AAA

14.7AAA

8.0AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

939147

BFBFDA

C1C1E6

8081B1

626295

Deuteranopia

A0B043

BCB9DA

BDB9E6

7C76B1

5E5994

Tritanopia

E63B39

AFD9D9

AAE5E5

63B0B0

479291

Achromatopsia

606060

CACACA

D1D1D1

969696

767676

Shades & Tints Shades & Tints

#F11856

Dark

Light

#ADD6DB

Dark

Light

#A7E2E7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f11856;
  --color-2: #add6db;
  --color-3: #a7e2e7;
  --color-4: #5facb3;
  --color-5: #448999;
}

SCSS

$color-1: #f11856;
$color-2: #add6db;
$color-3: #a7e2e7;
$color-4: #5facb3;
$color-5: #448999;

TAILWIND

colors: {
  'brand-1': '#f11856',
  'brand-2': '#add6db',
  'brand-3': '#a7e2e7',
  'brand-4': '#5facb3',
  'brand-5': '#448999',
}

RGB Array

[241, 24, 86], [173, 214, 219], [167, 226, 231], [95, 172, 179], [68, 137, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F11856, #ADD6DB, #A7E2E7, #5FACB3, #448999 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f11856; --color-2: #add6db; --color-3: #a7e2e7; --color-4: #5facb3; --color-5: #448999. 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. 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 tech, SaaS, healthcare, eco industries. 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