Named color

Spinel

Spinel is a balanced red color with HEX #D83A56. According to Colors Encyclopedia, it has RGB 216, 58, 86, HSL 349, 67%, 54%, warm temperature, and is useful for jewel tone palettes, luxury branding, and premium interface accents.

#D83A56 red warm balanced

HEX #D83A56

RGB rgb(216, 58, 86)

HSL hsl(349 67% 54%)

CMYK cmyk(0, 73, 60, 15)

Luminance 0.183

Contrast Black 4.66:1White 4.51:1

CSS Utilities

--color-spinel: #D83A56;
.bg-spinel { background-color: #D83A56; }
.text-spinel { color: #D83A56; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0.183

Black text4.66:1AA Pass

White text4.51:1AA Pass

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#D83A56",
  "rgb": [
    216,
    58,
    86
  ],
  "hsl": [
    349,
    67,
    54
  ],
  "cmyk": [
    0,
    73,
    60,
    15
  ],
  "luminance": 0.183,
  "contrast": {
    "black": 4.66,
    "white": 4.51
  }
}

WCAG

{
  "AA": [
    "#000000",
    "#FFFFFF"
  ],
  "AAA": []
}

Harmonies

{
  "complementary": "#3BD8BB",
  "analogous": [
    "#D83BA7",
    "#D86D3B"
  ],
  "triadic": [
    "#58D83B",
    "#3B58D8"
  ],
  "tetradic": [
    "#A7D83B",
    "#3BD8BB",
    "#6D3BD8"
  ],
  "splitComplementary": [
    "#3BD86D",
    "#3BA7D8"
  ],
  "monochromatic": [
    "#E78899",
    "#D83A56",
    "#991E35"
  ]
}

Variants

{
  "light": "#E78899",
  "dark": "#991E35",
  "saturated": "#F22148",
  "desaturated": "#BE5568",
  "pastel": "#E5AEB8",
  "neon": "#FF3D61"
}

Pairings

{
  "best": [
    "#000000",
    "#3BD8BB",
    "#D83BA7",
    "#D86D3B"
  ],
  "avoid": [
    "#BE5568",
    "#E78899"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#E78899",
    "#BE5568"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "poppy-red",
    "rose-red",
    "indian-red",
    "roman-red",
    "vermilion"
  ],
  "generatedPalettes": [
    "spinel"
  ],
  "generatedComparisons": [
    "rose-red-vs-spinel",
    "spinel-vs-poppy-red"
  ],
  "relatedFamilies": [
    "/colors/by-family/red",
    "/colors/by-temperature/warm",
    "/colors/by-tone/balanced"
  ],
  "relatedTools": [
    "/harmonies/spinel",
    "/wcag/spinel",
    "/css/colors/spinel",
    "/hex/d83a56"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/red",
      "/colors/by-temperature/warm",
      "/colors/by-tone/balanced"
    ],
    "narrower": [
      "/palettes/spinel"
    ],
    "related": [
      "/colors/poppy-red",
      "/colors/rose-red",
      "/colors/indian-red",
      "/colors/roman-red",
      "/colors/vermilion",
      "/compare/rose-red-vs-spinel",
      "/compare/spinel-vs-poppy-red",
      "/harmonies/spinel",
      "/wcag/spinel",
      "/css/colors/spinel",
      "/hex/d83a56"
    ]
  }
}

Full JSON dataset

{
  "slug": "spinel",
  "name": "Spinel",
  "hex": "#D83A56",
  "uses": [
    "jewel-tone palettes",
    "luxury branding",
    "premium interface accents"
  ],
  "psychology": {
    "associations": [
      "depth",
      "richness",
      "prestige"
    ],
    "contexts": [
      "luxury",
      "fashion",
      "beauty",
      "editorial design"
    ],
    "avoidIn": [
      "minimal compliance dashboards"
    ]
  },
  "aliases": [],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design, material, cultural, and editorial color systems."
  },
  "family": "red",
  "temperature": "warm",
  "tone": [
    "balanced"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "red",
    "warm",
    "balanced",
    "jewel-tone-palettes",
    "luxury-branding",
    "premium-interface-accents",
    "depth",
    "richness",
    "prestige"
  ],
  "popularity": 80,
  "rgb": [
    216,
    58,
    86
  ],
  "hsl": [
    349,
    67,
    54
  ],
  "cmyk": [
    0,
    73,
    60,
    15
  ],
  "luminance": 0.183,
  "contrast": {
    "black": 4.66,
    "white": 4.51
  },
  "harmonies": {
    "complementary": "#3BD8BB",
    "analogous": [
      "#D83BA7",
      "#D86D3B"
    ],
    "triadic": [
      "#58D83B",
      "#3B58D8"
    ],
    "tetradic": [
      "#A7D83B",
      "#3BD8BB",
      "#6D3BD8"
    ],
    "splitComplementary": [
      "#3BD86D",
      "#3BA7D8"
    ],
    "monochromatic": [
      "#E78899",
      "#D83A56",
      "#991E35"
    ]
  },
  "variants": {
    "light": "#E78899",
    "dark": "#991E35",
    "saturated": "#F22148",
    "desaturated": "#BE5568",
    "pastel": "#E5AEB8",
    "neon": "#FF3D61"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#FFFFFF"
    ],
    "AAA": []
  },
  "css": {
    "variable": "--color-spinel: #D83A56;",
    "utility": ".bg-spinel { background-color: #D83A56; }",
    "textUtility": ".text-spinel { color: #D83A56; }"
  },
  "nearestColors": [
    "poppy-red",
    "rose-red",
    "indian-red",
    "roman-red",
    "vermilion"
  ],
  "generatedPalettes": [
    "spinel"
  ],
  "generatedComparisons": [
    "rose-red-vs-spinel",
    "spinel-vs-poppy-red"
  ],
  "relatedFamilies": [
    "/colors/by-family/red",
    "/colors/by-temperature/warm",
    "/colors/by-tone/balanced"
  ],
  "relatedTools": [
    "/harmonies/spinel",
    "/wcag/spinel",
    "/css/colors/spinel",
    "/hex/d83a56"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/red",
      "/colors/by-temperature/warm",
      "/colors/by-tone/balanced"
    ],
    "narrower": [
      "/palettes/spinel"
    ],
    "related": [
      "/colors/poppy-red",
      "/colors/rose-red",
      "/colors/indian-red",
      "/colors/roman-red",
      "/colors/vermilion",
      "/compare/rose-red-vs-spinel",
      "/compare/spinel-vs-poppy-red",
      "/harmonies/spinel",
      "/wcag/spinel",
      "/css/colors/spinel",
      "/hex/d83a56"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#3BD8BB",
      "#D83BA7",
      "#D86D3B"
    ],
    "avoid": [
      "#BE5568",
      "#E78899"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#E78899",
      "#BE5568"
    ]
  }
}

Color meaning and use

About Spinel Color

Spinel sits in the red family with warm temperature and balanced visual character. Spinel is a commonly used color name in design references, palettes, and editorial color systems.

Its common associations include depth, richness, and prestige, which makes it relevant for luxury and fashion. In design work, Spinel is most useful for jewel-tone palettes, luxury branding, and premium interface accents, especially when paired with black text for stronger contrast.

WCAG Accessibility

Contrast checks for Spinel against black and white text.

Black text4.66:1AA Pass

White text4.51:1AA Pass

AA text options#000000, #FFFFFF

AAA text optionsNone in seed set

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Poppy Red#DC343B

Rose Red#C21E56

Indian Red#CD5C5C

Roman Red#CD5C5C

Vermilion#E34234

Color Harmonies

#3BD8BB#3BD8BB

#D83BA7#D83BA7

#D86D3B#D86D3B

#58D83B#58D83B

#3B58D8#3B58D8

Open full Spinel harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#E78899#E78899

#991E35#991E35

#F22148#F22148

#BE5568#BE5568

#E5AEB8#E5AEB8

#FF3D61#FF3D61

Pairings

Black#000000

#3BD8BB#3BD8BB

#D83BA7#D83BA7

#D86D3B#D86D3B

Matte Black#1A1A1A

White Smoke#F5F5F5

Spinel

CSS Utilities

Machine-Readable Color Data (JSON)

About Spinel Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings