Pinterest included Persimmon in its 2026 Palette, drawing on activity across searches and saves. The red-orange shade also appeared in Fall 2026 runway reporting. These are consumer and fashion signals—not evidence that software teams have widely adopted persimmon. For a digital product, the useful question is where a red-orange token can remain readable and where it needs a darker companion.
The five sRGB values below are original ColorIndicator interface tokens inspired by a persimmon direction, not official digital conversions of Pinterest Palette, Pantone, Coloro or a textile standard. For campaign moodboards, see the Fall Color Palette Guide and Seasonal Palettes Hub; for another warm UI system, compare Terracotta in Modern UI Design.
Why red-orange needs two interface roles
- A deeper action and text token: #B8351B reaches 5.89:1 against white and 5.56:1 against #FAF8F5, passing AA for normal-size text. It can anchor light-theme links and white-labeled primary buttons.
- A brighter accent for the right context: #E65A3C measures 3.56:1 against white and 3.36:1 against #FAF8F5. Neither pair reaches 4.5:1 for normal text. Use #140F0C for a normal-size label on that accent fill; the tested pair measures 5.34:1.
- Meaning needs more than hue: red-orange can resemble conventional error or warning cues. Distinguish brand actions from destructive actions with words, icons and placement—not color alone.
A five-color persimmon palette for UI tokens
Give each value a specific role in a design system. Decorative dividers and accent fills are not substitutes for tested body text or essential control boundaries.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Spiced Persimmon | #B8351B | 184, 53, 27 | 10°, 74%, 41% | Primary actions, headings and links on tested light surfaces |
| --color-accent-highlight | Luminous Persimmon | #E65A3C | 230, 90, 60 | 11°, 77%, 57% | Dark-theme accent; light-theme fill with #140F0C text |
| --color-surface-light | Warm Alabaster Canvas | #FAF8F5 | 250, 248, 245 | 36°, 33%, 97% | Light canvas and card surfaces |
| --color-border-subtle | Sunbaked Clay | #E8DFD8 | 232, 223, 216 | 26°, 26%, 88% | Decorative dividers, not the sole control boundary |
| --color-surface-dark | Espresso Obsidian | #140F0C | 20, 15, 12 | 23°, 25%, 6% | Dark canvas; high-contrast light-theme body text |
Have a product screenshot or campaign moodboard? Analyze your image to extract its actual colors, or browse the Color Palettes Library for another starting point.
WCAG contrast: measure the exact pairing
These sRGB ratios are calculated from the stated HEX values. They describe specific foreground/background pairs, not the accessibility of an entire screen or design system.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #140F0C / #FFFFFF | 19.03:1 | AAA | AAA | Exceeds 3:1 where required |
| #140F0C / #FAF8F5 | 17.95:1 | AAA | AAA | Exceeds 3:1 where required |
| #B8351B / #FFFFFF | 5.89:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #B8351B / #FAF8F5 | 5.56:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #140F0C / #E65A3C | 5.34:1 | AA; not AAA | AAA | Exceeds 3:1 where required |
| #E65A3C / #FFFFFF | 3.56:1 | Below AA | AA; not AAA | Exceeds 3:1 if essential |
| #E65A3C / #FAF8F5 | 3.36:1 | Below AA | AA; not AAA | Exceeds 3:1 if essential |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
#E65A3C can distinguish a button fill from the tested light surfaces, but normal-size white text on that fill remains below AA. Pair it with #140F0C text instead. A distinct hit-area border is required by SC 1.4.11 only when necessary to identify the control; test any required border and focus indicator against their adjacent colors.
#B8351B on #140F0C reaches only 3.23:1, so do not reuse that light-theme text token as normal dark-mode text. #E8DFD8 on #FAF8F5 reaches only 1.24:1 and should remain decorative, not the only input outline. Disabled controls are exempt from SC 1.4.11, but active and focused states still need checks.
The darker #962B16 hover token reaches 7.91:1 against white and 7.46:1 against #FAF8F5. Test hover, focus and neighboring surfaces in the Contrast Checker; inspect RGB and HSL in the HEX to RGB Converter.
Light and dark token roles
In a light theme, start with #FAF8F5 for the canvas, white for raised cards, #140F0C for body text and #B8351B for primary actions with white labels. Use #E65A3C as a secondary fill only with a tested dark label. In dark mode, promote #E65A3C to text and accent roles on #140F0C; that exact pair reaches 5.34:1. Do not assume other states inherit these results.
CSS custom properties to start from
:root { --color-canvas: #FAF8F5; --color-surface: #FFFFFF; --color-text-main: #140F0C; --color-brand-primary: #B8351B; }for the light foundation.--color-brand-primary-hover: #962B16; --color-accent-fill: #E65A3C; --color-text-on-accent: #140F0C;for the tested action and accent roles.--color-border-subtle: #E8DFD8; --color-dark-canvas: #140F0C; --color-dark-accent: #E65A3C;as starting values; test each real component.
Frequently asked questions
Are these HEX codes an official Pinterest, Pantone or Coloro persimmon specification?
No. Pinterest included Persimmon in its 2026 Palette, but the five sRGB values in this guide are original ColorIndicator interface tokens, not official conversions of a forecast or physical color standard.
Does Deep Spiced Persimmon meet WCAG AA or AAA on light surfaces?
#B8351B measures 5.89:1 against white and 5.56:1 against #FAF8F5. Both pairs meet AA for normal text and AAA for large text, but not the 7:1 AAA threshold for normal text. For the tested light surfaces, #140F0C exceeds 17:1 for body copy.
Can Luminous Persimmon be used with white text on a button?
Not for a normal-size label: white on #E65A3C measures 3.56:1, below the 4.5:1 AA minimum. #140F0C text on that fill measures 5.34:1. Test the actual button boundary and focus state separately.
Where can I convert these HEX codes and check contrast?
The ColorIndicator HEX to RGB Converter displays RGB and HSL values. Enter each foreground and background pair in the Contrast Checker before using it in a real component.
Convert a swatch in the HEX to RGB Converter, then measure the final foreground/background pair in the Contrast Checker.