Color | insonic | 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
Glacial blue	`#86BDF2`	`brand.accent.bright`	Mark and identity accent on dark surfaces
Deep glacial blue	`#256DA9`	`brand.accent.accessible`	Mark and readable identity accent on light surfaces

Approved combinations and artwork

Application	Formal colors	Artwork	Use
Insonic A1	Glacial blue	`logo.full`	Three separated voice forms on dark surfaces

Correct: use Deep glacial blue (#256DA9) in its approved identity application; pair the action cue (#256DA9) with a descriptive button or link label. Misuse: a lone identity swatch as the only action 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	`#256DA9`	Primary interactive action	#FFFFFF foreground, 5.47:1; 3.37:1 against #0C151B	A descriptive button or link label
Warning	`#F2BE6E`	Attention or recoverable risk	#000000 foreground, 12.37:1; 10.86:1 against #0C151B	Warning text and icon
Error	`#F39494`	Failure or destructive action	#000000 foreground, 9.47:1; 8.32:1 against #0C151B	Error text and icon
Success	`#77C9A8`	Completed operation	#000000 foreground, 10.70:1; 9.40:1 against #0C151B	Success text and icon
Information	`#86BDF2`	Neutral information or help	#000000 foreground, 10.57:1; 9.29:1 against #0C151B	Information label and icon
Focus	`#86BDF2`	Keyboard focus ring	#000000 foreground, 10.57:1; 9.29:1 against #0C151B	Visible outline and keyboard focus order
Selection	`#86BDF2`	Selected control or item	#000000 foreground, 10.57:1; 9.29:1 against #0C151B	Selected label or checked state
Disabled	`#86BDF2`	Unavailable control	#000000 foreground, 10.57:1; 9.29:1 against #0C151B	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	`#256DA9`	Primary interactive action	#FFFFFF foreground, 5.47:1; 5.08:1 against #F4F7F7	A descriptive button or link label
Warning	`#805000`	Attention or recoverable risk	#FFFFFF foreground, 6.85:1; 6.36:1 against #F4F7F7	Warning text and icon
Error	`#A03035`	Failure or destructive action	#FFFFFF foreground, 7.07:1; 6.57:1 against #F4F7F7	Error text and icon
Success	`#17654B`	Completed operation	#FFFFFF foreground, 7.00:1; 6.50:1 against #F4F7F7	Success text and icon
Information	`#256DA9`	Neutral information or help	#FFFFFF foreground, 5.47:1; 5.08:1 against #F4F7F7	Information label and icon
Focus	`#256DA9`	Keyboard focus ring	#FFFFFF foreground, 5.47:1; 5.08:1 against #F4F7F7	Visible outline and keyboard focus order
Selection	`#256DA9`	Selected control or item	#FFFFFF foreground, 5.47:1; 5.08:1 against #F4F7F7	Selected label or checked state
Disabled	`#86BDF2`	Unavailable control	#000000 foreground, 10.57:1; 1.84:1 against #F4F7F7	Disabled attribute and text

Dark palette

Backgroundbackground#0C151B

See more color values

RGB: rgb(12 21 27)
HSL: hsl(204.0 38.5% 7.6%)
OKLCH: oklch(0.1899 0.0181 238.1)
Lab D50: lab(6.20% -2.24 -5.43)

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

CardcardAlso: popover, sidebar#14222C

See more color values

RGB: rgb(20 34 44)
HSL: hsl(205.0 37.5% 12.5%)
OKLCH: oklch(0.2441 0.0272 240.4)
Lab D50: lab(12.32% -3.63 -8.70)

CMYK: output profile required

PrimaryprimaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-information#86BDF2

See more color values

RGB: rgb(134 189 242)
HSL: hsl(209.4 80.6% 73.7%)
OKLCH: oklch(0.7802 0.0955 248.2)
Lab D50: lab(74.30% -8.11 -32.45)

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#20323F

See more color values

RGB: rgb(32 50 63)
HSL: hsl(205.2 32.6% 18.6%)
OKLCH: oklch(0.3075 0.0333 240.6)
Lab D50: lab(19.68% -4.44 -10.67)

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#2B4050

See more color values

RGB: rgb(43 64 80)
HSL: hsl(205.9 30.1% 24.1%)
OKLCH: oklch(0.3609 0.0385 241.9)
Lab D50: lab(25.86% -4.85 -12.49)

CMYK: output profile required

Destructivedestructive#F39494

See more color values

RGB: rgb(243 148 148)
HSL: hsl(0.0 79.8% 76.7%)
OKLCH: oklch(0.7648 0.1150 20.1)
Lab D50: lab(71.53% 36.67 16.11)

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#6DC9CA

See more color values

RGB: rgb(109 201 202)
HSL: hsl(180.6 46.7% 61.0%)
OKLCH: oklch(0.7797 0.0880 196.4)
Lab D50: lab(75.36% -28.47 -9.51)

CMYK: output profile required

Chart 3chart-3#C0ABE8

See more color values

RGB: rgb(192 171 232)
HSL: hsl(260.7 57.0% 79.0%)
OKLCH: oklch(0.7804 0.0882 300.1)
Lab D50: lab(73.42% 16.82 -27.95)

CMYK: output profile required

Chart 4chart-4#95C794

See more color values

RGB: rgb(149 199 148)
HSL: hsl(118.8 31.3% 68.0%)
OKLCH: oklch(0.7810 0.0886 144.2)
Lab D50: lab(75.72% -24.49 20.12)

CMYK: output profile required

Chart 5chart-5#E4A0BD

See more color values

RGB: rgb(228 160 189)
HSL: hsl(334.4 55.7% 76.1%)
OKLCH: oklch(0.7795 0.0884 352.1)
Lab D50: lab(73.25% 29.08 -4.31)

CMYK: output profile required

Brand Accent Deepbrand-accent-deepAlso: brand-cta#256DA9

See more color values

RGB: rgb(37 109 169)
HSL: hsl(207.3 64.1% 40.4%)
OKLCH: oklch(0.5204 0.1179 247.9)
Lab D50: lab(43.92% -6.07 -39.19)

CMYK: output profile required

Brand Emphasisbrand-emphasis#F2BE6E

See more color values

RGB: rgb(242 190 110)
HSL: hsl(36.4 83.5% 69.0%)
OKLCH: oklch(0.8319 0.1148 76.9)
Lab D50: lab(80.52% 12.65 47.44)

CMYK: output profile required

Brand Successbrand-success#77C9A8

See more color values

RGB: rgb(119 201 168)
HSL: hsl(155.9 43.2% 62.7%)
OKLCH: oklch(0.7740 0.0943 166.3)
Lab D50: lab(75.05% -31.93 8.31)

CMYK: output profile required

Light palette

Backgroundbackground#F4F7F7

See more color values

RGB: rgb(244 247 247)
HSL: hsl(180.0 15.8% 96.3%)
OKLCH: oklch(0.9739 0.0032 197.1)
Lab D50: lab(97.00% -1.03 -0.37)

CMYK: output profile required

ForegroundforegroundAlso: card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground#17282E

See more color values

RGB: rgb(23 40 46)
HSL: hsl(195.7 33.3% 13.5%)
OKLCH: oklch(0.2647 0.0252 222.2)
Lab D50: lab(14.83% -5.85 -6.31)

CMYK: output profile required

CardcardAlso: 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

PrimaryprimaryAlso: ring, chart-1, sidebar-primary, sidebar-ring, brand-accent-deep, brand-cta, brand-cta-outline-foreground, brand-information#256DA9

See more color values

RGB: rgb(37 109 169)
HSL: hsl(207.3 64.1% 40.4%)
OKLCH: oklch(0.5204 0.1179 247.9)
Lab D50: lab(43.92% -6.07 -39.19)

CMYK: output profile required

Secondarysecondary#E8EEF2

See more color values

RGB: rgb(232 238 242)
HSL: hsl(204.0 27.8% 92.9%)
OKLCH: oklch(0.9457 0.0084 236.6)
Lab D50: lab(93.72% -1.52 -2.67)

CMYK: output profile required

MutedmutedAlso: accent, sidebar-accent#E6EEF3

See more color values

RGB: rgb(230 238 243)
HSL: hsl(203.1 35.1% 92.7%)
OKLCH: oklch(0.9445 0.0109 234.8)
Lab D50: lab(93.59% -2.06 -3.40)

CMYK: output profile required

Muted Foregroundmuted-foreground#50616B

See more color values

RGB: rgb(80 97 107)
HSL: hsl(202.2 14.4% 36.7%)
OKLCH: oklch(0.4821 0.0263 233.9)
Lab D50: lab(39.99% -4.83 -7.97)

CMYK: output profile required

Destructivedestructive#A03035

See more color values

RGB: rgb(160 48 53)
HSL: hsl(357.3 53.8% 40.8%)
OKLCH: oklch(0.4797 0.1474 22.3)
Lab D50: lab(38.12% 46.95 24.79)

CMYK: output profile required

BorderborderAlso: input, sidebar-border#7F898C

See more color values

RGB: rgb(127 137 140)
HSL: hsl(193.8 5.3% 52.4%)
OKLCH: oklch(0.6228 0.0126 217.6)
Lab D50: lab(56.33% -3.31 -2.94)

CMYK: output profile required

Chart 2chart-2#00787A

See more color values

RGB: rgb(0 120 122)
HSL: hsl(181.0 100.0% 23.9%)
OKLCH: oklch(0.5193 0.0884 196.8)
Lab D50: lab(45.14% -28.49 -9.67)

CMYK: output profile required

Chart 3chart-3#73599E

See more color values

RGB: rgb(115 89 158)
HSL: hsl(262.6 27.9% 48.4%)
OKLCH: oklch(0.5203 0.1089 300.0)
Lab D50: lab(42.84% 22.37 -34.00)

CMYK: output profile required

Chart 4chart-4#3E793E

See more color values

RGB: rgb(62 121 62)
HSL: hsl(120.0 32.2% 35.9%)
OKLCH: oklch(0.5208 0.1090 143.8)
Lab D50: lab(45.73% -29.97 26.02)

CMYK: output profile required

Chart 5chart-5#974C70

See more color values

RGB: rgb(151 76 112)
HSL: hsl(331.2 33.0% 44.5%)
OKLCH: oklch(0.5197 0.1091 351.4)
Lab D50: lab(42.84% 35.27 -5.75)

CMYK: output profile required

Brand Emphasisbrand-emphasis#805000

See more color values

RGB: rgb(128 80 0)
HSL: hsl(37.5 100.0% 25.1%)
OKLCH: oklch(0.4745 0.1027 70.2)
Lab D50: lab(38.82% 16.78 47.39)

CMYK: output profile required

Brand Successbrand-success#17654B

See more color values

RGB: rgb(23 101 75)
HSL: hsl(160.0 62.9% 24.3%)
OKLCH: oklch(0.4536 0.0852 165.8)
Lab D50: lab(37.75% -29.30 7.82)

CMYK: output profile required

Formal identity colors

Approved combinations and artwork

Interface cues on dark surfaces

Interface cues on light surfaces

Dark palette

Light palette

On this page