Color | DanceWithMe865 | ShruggieTech

HEX is the canonical screen reference. Formal identity colors belong to approved brand applications; interface cues communicate actions and states with words, icons, outlines, or attributes as well as color.

Formal identity colors

A color used in artwork is not automatically a warning or action cue.

Color	HEX	Source	Use
Signature Red	`#DF221E`	`brand.accent.deep`	Red 865 block on light surfaces
Night Red	`#FF493D`	`brand.accent.bright`	Red 865 block on dark surfaces
Ink	`#08090A`	`brand.legacy_palette.0`	Light-surface DWM and wordmark
Paper	`#F8F8F6`	`brand.legacy_palette.1`	Dark-surface DWM and wordmark

Approved combinations and artwork

Application	Formal colors	Artwork	Use
Light lockup	Ink, Signature Red, Paper	`logo.full`	Approved stacked and horizontal light treatments
Dark lockup	Paper, Night Red, Ink	`logo.full`	Approved stacked and horizontal dark treatments

Correct: use Night Red (#FF493D) in its approved identity application; pair the warning cue (#FF493D) with warning text and icon. Misuse: a lone identity swatch as the only warning signal.

Interface cues on dark surfaces

A shared HEX value does not merge identity and interface roles. State meaning also requires the listed non-color cue.

Cue	HEX	Meaning	Measured pairing	Non-color cue
Action	`#BE1F1C`	Primary interactive action	#FFFFFF foreground, 6.17:1; 3.23:1 against #08090A	A descriptive button or link label
Warning	`#FF493D`	Attention or recoverable risk	#000000 foreground, 6.27:1; 5.95:1 against #08090A	Warning text and icon
Error	`#E9505F`	Failure or destructive action	#000000 foreground, 5.78:1; 5.48:1 against #08090A	Error text and icon
Success	`#FF493D`	Completed operation	#000000 foreground, 6.27:1; 5.95:1 against #08090A	Success text and icon
Information	`#DF221E`	Neutral information or help	#FFFFFF foreground, 4.79:1; 4.16:1 against #08090A	Information label and icon
Focus	`#FF493D`	Keyboard focus ring	#000000 foreground, 6.27:1; 5.95:1 against #08090A	Visible outline and keyboard focus order
Selection	`#FF493D`	Selected control or item	#000000 foreground, 6.27:1; 5.95:1 against #08090A	Selected label or checked state
Disabled	`#F77B72`	Unavailable control	#000000 foreground, 8.03:1; 7.62:1 against #08090A	Disabled attribute and text

Interface cues on light surfaces

A shared HEX value does not merge identity and interface roles. State meaning also requires the listed non-color cue.

Cue	HEX	Meaning	Measured pairing	Non-color cue
Action	`#BE1F1C`	Primary interactive action	#FFFFFF foreground, 6.17:1; 6.17:1 against #FFFFFF	A descriptive button or link label
Warning	`#BE1F1C`	Attention or recoverable risk	#FFFFFF foreground, 6.17:1; 6.17:1 against #FFFFFF	Warning text and icon
Error	`#C0293A`	Failure or destructive action	#FFFFFF foreground, 5.80:1; 5.80:1 against #FFFFFF	Error text and icon
Success	`#BE1F1C`	Completed operation	#FFFFFF foreground, 6.17:1; 6.17:1 against #FFFFFF	Success text and icon
Information	`#BE1F1C`	Neutral information or help	#FFFFFF foreground, 6.17:1; 6.17:1 against #FFFFFF	Information label and icon
Focus	`#BE1F1C`	Keyboard focus ring	#FFFFFF foreground, 6.17:1; 6.17:1 against #FFFFFF	Visible outline and keyboard focus order
Selection	`#BE1F1C`	Selected control or item	#FFFFFF foreground, 6.17:1; 6.17:1 against #FFFFFF	Selected label or checked state
Disabled	`#F77B72`	Unavailable control	#000000 foreground, 8.03:1; 2.61:1 against #FFFFFF	Disabled attribute and text

Dark palette

Backgroundbackground#08090A

See more color values

RGB: rgb(8 9 10)
HSL: hsl(210.0 11.1% 3.5%)
OKLCH: oklch(0.1390 0.0029 246.3)
Lab D50: lab(2.42% -0.17 -0.48)

CMYK: output profile required

ForegroundforegroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground, brand-cta-foreground, brand-cta-outline-foreground#FFFFFF

See more color values

RGB: rgb(255 255 255)
HSL: hsl(0.0 0.0% 100.0%)
OKLCH: oklch(1.0000 0.0000 0.0)
Lab D50: lab(100.00% 0.00 0.00)

CMYK: output profile required

Cardcard#17181B

See more color values

RGB: rgb(23 24 27)
HSL: hsl(225.0 8.0% 9.8%)
OKLCH: oklch(0.2092 0.0061 271.1)
Lab D50: lab(8.23% 0.12 -2.29)

CMYK: output profile required

PopoverpopoverAlso: sidebar#1A1B1E

See more color values

RGB: rgb(26 27 30)
HSL: hsl(225.0 7.1% 11.0%)
OKLCH: oklch(0.2223 0.0060 271.1)
Lab D50: lab(9.75% 0.11 -2.26)

CMYK: output profile required

PrimaryprimaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-emphasis#FF493D

See more color values

RGB: rgb(255 73 61)
HSL: hsl(3.7 100.0% 62.0%)
OKLCH: oklch(0.6672 0.2200 28.4)
Lab D50: lab(59.26% 68.65 49.30)

CMYK: output profile required

Primary Foregroundprimary-foregroundAlso: sidebar-primary-foreground#000000

See more color values

RGB: rgb(0 0 0)
HSL: hsl(0.0 0.0% 0.0%)
OKLCH: oklch(0.0000 0.0000 0.0)
Lab D50: lab(0.00% 0.00 0.00)

CMYK: output profile required

SecondarysecondaryAlso: muted#1D1E22

See more color values

RGB: rgb(29 30 34)
HSL: hsl(228.0 7.9% 12.4%)
OKLCH: oklch(0.2357 0.0078 274.6)
Lab D50: lab(11.28% 0.31 -2.91)

CMYK: output profile required

Muted Foregroundmuted-foreground#9A9A9A

See more color values

RGB: rgb(154 154 154)
HSL: hsl(0.0 0.0% 60.4%)
OKLCH: oklch(0.6862 0.0000 0.0)
Lab D50: lab(63.60% 0.00 0.00)

CMYK: output profile required

AccentaccentAlso: sidebar-accent#202126

See more color values

RGB: rgb(32 33 38)
HSL: hsl(230.0 8.6% 13.7%)
OKLCH: oklch(0.2488 0.0095 276.7)
Lab D50: lab(12.79% 0.51 -3.55)

CMYK: output profile required

Destructivedestructive#E9505F

See more color values

RGB: rgb(233 80 95)
HSL: hsl(354.1 77.7% 61.4%)
OKLCH: oklch(0.6437 0.1882 18.6)
Lab D50: lab(56.66% 60.52 26.02)

CMYK: output profile required

BorderborderAlso: input, sidebar-border#262626

See more color values

RGB: rgb(38 38 38)
HSL: hsl(0.0 0.0% 14.9%)
OKLCH: oklch(0.2686 0.0000 0.0)
Lab D50: lab(15.16% -0.00 0.00)

CMYK: output profile required

Chart 2chart-2#DD59C2

See more color values

RGB: rgb(221 89 194)
HSL: hsl(312.3 66.0% 60.8%)
OKLCH: oklch(0.6679 0.2022 336.4)
Lab D50: lab(58.53% 61.04 -29.27)

CMYK: output profile required

Chart 3chart-3#C08900

See more color values

RGB: rgb(192 137 0)
HSL: hsl(42.8 100.0% 37.6%)
OKLCH: oklch(0.6669 0.1381 80.1)
Lab D50: lab(61.36% 14.94 65.95)

CMYK: output profile required

Chart 4chart-4#8B7FFF

See more color values

RGB: rgb(139 127 255)
HSL: hsl(245.6 100.0% 74.9%)
OKLCH: oklch(0.6678 0.1836 284.5)
Lab D50: lab(58.99% 29.08 -63.43)

CMYK: output profile required

Chart 5chart-5#66AA00

See more color values

RGB: rgb(102 170 0)
HSL: hsl(84.0 100.0% 33.3%)
OKLCH: oklch(0.6664 0.1856 132.2)
Lab D50: lab(63.16% -39.05 63.02)

CMYK: output profile required

Brand Accent Deepbrand-accent-deep#DF221E

See more color values

RGB: rgb(223 34 30)
HSL: hsl(1.2 76.3% 49.6%)
OKLCH: oklch(0.5797 0.2207 28.3)
Lab D50: lab(49.06% 69.23 53.25)

CMYK: output profile required

Brand Ctabrand-cta#BE1F1C

See more color values

RGB: rgb(190 31 28)
HSL: hsl(1.1 74.3% 42.7%)
OKLCH: oklch(0.5166 0.1933 28.0)
Lab D50: lab(42.01% 60.68 45.42)

CMYK: output profile required

Light palette

BackgroundbackgroundAlso: card, popover, primary-foreground, sidebar, sidebar-primary-foreground, brand-cta-foreground#FFFFFF

See more color values

RGB: rgb(255 255 255)
HSL: hsl(0.0 0.0% 100.0%)
OKLCH: oklch(1.0000 0.0000 0.0)
Lab D50: lab(100.00% 0.00 0.00)

CMYK: output profile required

ForegroundforegroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground#08090A

See more color values

RGB: rgb(8 9 10)
HSL: hsl(210.0 11.1% 3.5%)
OKLCH: oklch(0.1390 0.0029 246.3)
Lab D50: lab(2.42% -0.17 -0.48)

CMYK: output profile required

PrimaryprimaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-emphasis, brand-cta, brand-cta-outline-foreground#BE1F1C

See more color values

RGB: rgb(190 31 28)
HSL: hsl(1.1 74.3% 42.7%)
OKLCH: oklch(0.5166 0.1933 28.0)
Lab D50: lab(42.01% 60.68 45.42)

CMYK: output profile required

Secondarysecondary#F8F8F6

See more color values

RGB: rgb(248 248 246)
HSL: hsl(60.0 12.5% 96.9%)
OKLCH: oklch(0.9786 0.0026 106.4)
Lab D50: lab(97.54% -0.26 0.96)

CMYK: output profile required

MutedmutedAlso: accent, sidebar-accent#F1F1EF

See more color values

RGB: rgb(241 241 239)
HSL: hsl(60.0 6.7% 94.1%)
OKLCH: oklch(0.9576 0.0027 106.4)
Lab D50: lab(95.10% -0.26 0.97)

CMYK: output profile required

Muted Foregroundmuted-foreground#4A4B4D

See more color values

RGB: rgb(74 75 77)
HSL: hsl(220.0 2.0% 29.6%)
OKLCH: oklch(0.4126 0.0036 264.5)
Lab D50: lab(31.85% -0.09 -1.34)

CMYK: output profile required

Destructivedestructive#C0293A

See more color values

RGB: rgb(192 41 58)
HSL: hsl(353.2 64.8% 45.7%)
OKLCH: oklch(0.5308 0.1857 20.9)
Lab D50: lab(43.62% 59.48 30.04)

CMYK: output profile required

BorderborderAlso: input, sidebar-border#888989

See more color values

RGB: rgb(136 137 137)
HSL: hsl(180.0 0.4% 53.5%)
OKLCH: oklch(0.6292 0.0012 197.1)
Lab D50: lab(57.00% -0.38 -0.14)

CMYK: output profile required

Chart 2chart-2#A2338E

See more color values

RGB: rgb(162 51 142)
HSL: hsl(310.8 52.1% 41.8%)
OKLCH: oklch(0.5166 0.1777 335.9)
Lab D50: lab(41.30% 53.37 -26.20)

CMYK: output profile required

Chart 3chart-3#886000

See more color values

RGB: rgb(136 96 0)
HSL: hsl(42.4 100.0% 26.7%)
OKLCH: oklch(0.5176 0.1072 80.2)
Lab D50: lab(44.04% 11.56 51.18)

CMYK: output profile required

Chart 4chart-4#6051C8

See more color values

RGB: rgb(96 81 200)
HSL: hsl(247.6 52.0% 55.1%)
OKLCH: oklch(0.5162 0.1778 284.0)
Lab D50: lab(41.22% 31.13 -61.30)

CMYK: output profile required

Chart 5chart-5#477800

See more color values

RGB: rgb(71 120 0)
HSL: hsl(84.5 100.0% 23.5%)
OKLCH: oklch(0.5174 0.1437 132.0)
Lab D50: lab(45.45% -30.11 48.94)

CMYK: output profile required

Brand Accent Deepbrand-accent-deep#DF221E

See more color values

RGB: rgb(223 34 30)
HSL: hsl(1.2 76.3% 49.6%)
OKLCH: oklch(0.5797 0.2207 28.3)
Lab D50: lab(49.06% 69.23 53.25)

CMYK: output profile required

DanceWithMe865 is an independent client brand. DanceWithMe865 owns its trademarks and is responsible for its services and applicable terms.

Formal identity colors

Approved combinations and artwork

Interface cues on dark surfaces

Interface cues on light surfaces

Dark palette

Light palette

On this page