← Back to Editor

#BF694A · #AF9687 · #9CB9B0 · #92D6BD · #89F0C2

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

#BF694A

Tangerine · Chocolate · Warm Sun

HEX
#BF694A
RGB
rgb(191, 105, 74)
HSL
hsl(16, 48%, 52%)
HSB
hsb(16, 61%, 75%)
CMYK
cmyk(0%, 45%, 61%, 25%)
Oklch
oklch(61.3% 0.119 40.3)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#AF9687

Apricot · DarkGray · Warm Sun

HEX
#AF9687
RGB
rgb(175, 150, 135)
HSL
hsl(23, 20%, 61%)
HSB
hsb(23, 23%, 69%)
CMYK
cmyk(0%, 14%, 23%, 31%)
Oklch
oklch(69.1% 0.037 52.8)

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

#9CB9B0

Jade · DarkGray · Lake Green

HEX
#9CB9B0
RGB
rgb(156, 185, 176)
HSL
hsl(161, 17%, 67%)
HSB
hsb(161, 16%, 73%)
CMYK
cmyk(16%, 0%, 5%, 27%)
Oklch
oklch(76.1% 0.034 174.6)

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

#92D6BD

Jade · SkyBlue · Apple Green

HEX
#92D6BD
RGB
rgb(146, 214, 189)
HSL
hsl(158, 45%, 71%)
HSB
hsb(158, 32%, 84%)
CMYK
cmyk(32%, 0%, 12%, 16%)
Oklch
oklch(82.4% 0.077 169.4)

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

#89F0C2

Jade · LightGreen · Apple Green

HEX
#89F0C2
RGB
rgb(137, 240, 194)
HSL
hsl(153, 77%, 74%)
HSB
hsb(153, 43%, 94%)
CMYK
cmyk(43%, 0%, 19%, 6%)
Oklch
oklch(88.0% 0.117 163.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF694A
4AA0BF

Analogous

BF4A65
BF694A
BFA44A

Triadic

BF694A
4ABF69
694ABF

Split-Comp.

BF694A
4ABFA4
4A65BF

Tetradic

BF694A
65BF4A
4AA0BF
A44ABF

Contrast Matrix WCAG 2.1 Contrast

BF694A
AF9687
9CB9B0
92D6BD
89F0C2
—
1.4
Fail
1.9
Fail
2.4
Fail
2.9
Fail
1.4
Fail
—
1.3
Fail
1.7
Fail
2.0
Fail
1.9
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
2.4
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
2.9
Fail
2.0
Fail
1.5
Fail
1.2
Fail
—
White BG
3.9AA Large
2.8Fail
2.1Fail
1.7Fail
1.4Fail
Black BG
5.3AA
7.5AAA
10.0AAA
12.6AAA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9952
A4A48B
A9A9B2
AFB0C3
B6B7CD

Deuteranopia

9FA553
A6A88C
A7A5B3
ACA6C5
B0A8D0

Tritanopia

BB5759
AE8D8E
9DB4B4
95C8C9
8ED6D8

Achromatopsia

7F7F7F
9C9C9C
AFAFAF
BFBFBF
CCCCCC

Shades & Tints Shades & Tints

#BF694A

Dark
Light

#AF9687

Dark
Light

#9CB9B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf694a;
  --color-2: #af9687;
  --color-3: #9cb9b0;
  --color-4: #92d6bd;
  --color-5: #89f0c2;
}

SCSS

$color-1: #bf694a;
$color-2: #af9687;
$color-3: #9cb9b0;
$color-4: #92d6bd;
$color-5: #89f0c2;

TAILWIND

colors: {
  'brand-1': '#bf694a',
  'brand-2': '#af9687',
  'brand-3': '#9cb9b0',
  'brand-4': '#92d6bd',
  'brand-5': '#89f0c2',
}

RGB Array

[191, 105, 74], [175, 150, 135], [156, 185, 176], [146, 214, 189], [137, 240, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF694A, #AF9687, #9CB9B0, #92D6BD, #89F0C2 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: #bf694a; --color-2: #af9687; --color-3: #9cb9b0; --color-4: #92d6bd; --color-5: #89f0c2. 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