Chocolate

chocolate is a CSS color keyword. The closest Tailwind step is amber-700 (#b45309).

#d2691ergb(210, 105, 30)

Hex: #d2691e
RGB: 210, 105, 30
HSL: 25°, 75%, 47%
OKLCH: 63.4% 0.155 50.3
LAB: 56.0 37.1 56.7

Open #d2691e in the explorer

Text contrast

Black or white text on #d2691e. AA needs 4.5:1 and AAA needs 7:1. APCA Lc is a separate readability score.

Black text5.8:1 AAAPCA Lc 43

White text3.6:1 FailAPCA Lc -66

Color vision

How #d2691e looks in simulations of color blindness, at full severity.

Full color
#d2691e

Protanopia
#87780e

Deuteranopia
#a18f1b

Tritanopia
#e7515b

Tonal scale

An OKLCH ramp that keeps this hue. The marked step is the closest lightness to chocolate.

50 100200300400500600700800900950

Copy into CSS

color: chocolate;
background: #d2691e;

@theme {
  --color-chocolate-50: #fff2eb;
  --color-chocolate-100: #ffe1d1;
  --color-chocolate-200: #ffc29f;
  --color-chocolate-300: #ff9554;
  --color-chocolate-400: #e27731;
  --color-chocolate-500: #bf5900;
  --color-chocolate-600: #984500;
  --color-chocolate-700: #773500;
  --color-chocolate-800: #572500;
  --color-chocolate-900: #3a1600;
  --color-chocolate-950: #1b0700;
}