← Back to Editor

#BB8E89 · #A18D8C · #818F8F · #628E8D · #268D8C

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

#BB8E89

Peach Pink · Tan · Coral Red

HEX
#BB8E89
RGB
rgb(187, 142, 137)
HSL
hsl(6, 27%, 64%)
HSB
hsb(6, 27%, 73%)
CMYK
cmyk(0%, 24%, 27%, 27%)
Oklch
oklch(68.8% 0.056 25.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A18D8C

Crimson · Gray · Passion Red

HEX
#A18D8C
RGB
rgb(161, 141, 140)
HSL
hsl(3, 10%, 59%)
HSB
hsb(3, 13%, 63%)
CMYK
cmyk(0%, 12%, 13%, 37%)
Oklch
oklch(66.1% 0.024 21.2)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#818F8F

Ash · LightSlateGray · Warm Gray

HEX
#818F8F
RGB
rgb(129, 143, 143)
HSL
hsl(180, 6%, 53%)
HSB
hsb(180, 10%, 56%)
CMYK
cmyk(10%, 0%, 0%, 44%)
Oklch
oklch(63.9% 0.016 196.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#628E8D

Mineral Blue · SlateGray · Mint Ice

HEX
#628E8D
RGB
rgb(98, 142, 141)
HSL
hsl(179, 18%, 47%)
HSB
hsb(179, 31%, 56%)
CMYK
cmyk(31%, 0%, 1%, 44%)
Oklch
oklch(61.5% 0.048 194.2)

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

#268D8C

Mineral Blue · Teal · Mint Ice

HEX
#268D8C
RGB
rgb(38, 141, 140)
HSL
hsl(179, 58%, 35%)
HSB
hsb(179, 73%, 55%)
CMYK
cmyk(73%, 0%, 1%, 45%)
Oklch
oklch(58.7% 0.090 194.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB8E89
8AB7BC

Analogous

BC8A9E
BB8E89
BCA88A

Triadic

BB8E89
8ABC8F
8F8ABC

Split-Comp.

BB8E89
8ABCA8
8A9EBC

Tetradic

BB8E89
9EBC8A
8AB7BC
A88ABC

Contrast Matrix WCAG 2.1 Contrast

BB8E89
A18D8C
818F8F
628E8D
268D8C
—
1.1
Fail
1.2
Fail
1.3
Fail
1.4
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
White BG
2.9Fail
3.1AA Large
3.4AA Large
3.6AA Large
4.0AA Large
Black BG
7.3AAA
6.7AA
6.3AA
5.8AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A78A
98988C
87878F
75758D
53548C

Deuteranopia

AAAE8B
9A9B8C
86858F
736F8D
4D458C

Tritanopia

B98B8B
A08C8C
828F8F
648D8D
2B8C8C

Achromatopsia

9B9B9B
939393
8B8B8B
818181
6E6E6E

Shades & Tints Shades & Tints

#BB8E89

Dark
Light

#A18D8C

Dark
Light

#818F8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb8e89;
  --color-2: #a18d8c;
  --color-3: #818f8f;
  --color-4: #628e8d;
  --color-5: #268d8c;
}

SCSS

$color-1: #bb8e89;
$color-2: #a18d8c;
$color-3: #818f8f;
$color-4: #628e8d;
$color-5: #268d8c;

TAILWIND

colors: {
  'brand-1': '#bb8e89',
  'brand-2': '#a18d8c',
  'brand-3': '#818f8f',
  'brand-4': '#628e8d',
  'brand-5': '#268d8c',
}

RGB Array

[187, 142, 137], [161, 141, 140], [129, 143, 143], [98, 142, 141], [38, 141, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB8E89, #A18D8C, #818F8F, #628E8D, #268D8C is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bb8e89; --color-2: #a18d8c; --color-3: #818f8f; --color-4: #628e8d; --color-5: #268d8c. 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. Restrained colors convey professionalism and trust. 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