← Back to Editor

#1BB9B8 · #63A7B4 · #AA96AF · #F284AB · #67A6B0

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1BB9B8

Lake Blue · LightSeaGreen · Mint Ice

HEX
#1BB9B8
RGB
rgb(27, 185, 184)
HSL
hsl(180, 75%, 42%)
HSB
hsb(180, 85%, 73%)
CMYK
cmyk(85%, 0%, 1%, 27%)
Oklch
oklch(71.3% 0.118 194.1)

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

#63A7B4

Slate Blue · CadetBlue · Lake Green

HEX
#63A7B4
RGB
rgb(99, 167, 180)
HSL
hsl(190, 35%, 55%)
HSB
hsb(190, 45%, 71%)
CMYK
cmyk(45%, 7%, 0%, 29%)
Oklch
oklch(68.8% 0.071 211.2)

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

#AA96AF

Lilac · DarkGray · Lilac Purple

HEX
#AA96AF
RGB
rgb(170, 150, 175)
HSL
hsl(288, 14%, 64%)
HSB
hsb(288, 14%, 69%)
CMYK
cmyk(3%, 14%, 0%, 31%)
Oklch
oklch(69.9% 0.042 319.5)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#F284AB

Rouge · LightCoral · Rose Pink

HEX
#F284AB
RGB
rgb(242, 132, 171)
HSL
hsl(339, 81%, 73%)
HSB
hsb(339, 45%, 95%)
CMYK
cmyk(0%, 45%, 29%, 5%)
Oklch
oklch(74.5% 0.140 358.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#67A6B0

Slate Blue · CadetBlue · Lake Green

HEX
#67A6B0
RGB
rgb(103, 166, 176)
HSL
hsl(188, 32%, 55%)
HSB
hsb(188, 41%, 69%)
CMYK
cmyk(41%, 6%, 0%, 31%)
Oklch
oklch(68.6% 0.066 208.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1BB9B8
BB1B1B

Analogous

1BBB6B
1BB9B8
1B6BBB

Triadic

1BB9B8
BB1BBB
BBBB1B

Split-Comp.

1BB9B8
BB1B6B
BB6B1B

Tetradic

1BB9B8
6B1BBB
BB1B1B
6BBB1B

Contrast Matrix WCAG 2.1 Contrast

1BB9B8
63A7B4
AA96AF
F284AB
67A6B0
—
1.1
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
—
White BG
2.4Fail
2.7Fail
2.7Fail
2.4Fail
2.7Fail
Black BG
8.7AAA
7.7AAA
7.7AAA
8.7AAA
7.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F61B8
8081B1
A1A1A9
C2C1A2
8283AE

Deuteranopia

564AB8
7D77B0
A3A4A8
C9D19F
7F7AAD

Tritanopia

23B8B8
66AEAE
A9A4A3
EC9A98
6AACAB

Achromatopsia

8A8A8A
949494
9F9F9F
A9A9A9
949494

Shades & Tints Shades & Tints

#1BB9B8

Dark
Light

#63A7B4

Dark
Light

#AA96AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1bb9b8;
  --color-2: #63a7b4;
  --color-3: #aa96af;
  --color-4: #f284ab;
  --color-5: #67a6b0;
}

SCSS

$color-1: #1bb9b8;
$color-2: #63a7b4;
$color-3: #aa96af;
$color-4: #f284ab;
$color-5: #67a6b0;

TAILWIND

colors: {
  'brand-1': '#1bb9b8',
  'brand-2': '#63a7b4',
  'brand-3': '#aa96af',
  'brand-4': '#f284ab',
  'brand-5': '#67a6b0',
}

RGB Array

[27, 185, 184], [99, 167, 180], [170, 150, 175], [242, 132, 171], [103, 166, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1BB9B8, #63A7B4, #AA96AF, #F284AB, #67A6B0 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: #1bb9b8; --color-2: #63a7b4; --color-3: #aa96af; --color-4: #f284ab; --color-5: #67a6b0. 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