Skip to content
Brand guidelines

Color

Color scales

Section titled “Color scales”

Each palette has 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. Lower values are lighter; higher values are darker. In dark mode, the same token names are used but resolve to different values, effectively inverting the scale — 50 becomes the darkest and 950 the lightest.

Semantic colors

Section titled “Semantic colors”

Each palette also has four defined semantic colors: Primary, Accent, Muted, and Background.

  • Primary is mapped to the 700 value of each palette and should be used for the majority of color needs.
  • Accent is mapped to the 500 value and should be used for emphasis and to add visual interest.
  • Muted is mapped to the 200 value and should be used for secondary elements and bolder backgrounds.
  • Background is mapped to the 50 value and should be used for backgrounds and surfaces.

Primary palettes

Section titled “Primary palettes”

Violet is the primary color of the Pulumi brand, and it should be used prominently in all brand materials. It should be used alongside the gray palette as needed.

Violet
PrimaryViolet 700
AccentViolet 500
MutedViolet 200
BackgroundViolet 50
50#f5f5ff
100#ebebff
200#dedbff
300#c3bdff
400#a697fc
500#9077f3
600#7952e5
700#5a30c5
800#492e8e
900#392960
950#231f33
Gray
PrimaryGray 700
AccentGray 500
MutedGray 200
BackgroundGray 50
50#fafafa
100#efeff0
200#e0dfe2
300#cbcace
400#b3b1b9
500#9997a0
600#817d8c
700#6a6675
800#56535a
900#46434c
950#2e2932

Supporting palettes

Section titled “Supporting palettes”

Other approved color palettes (green, aqua, blue, red, orange, and yellow) should be used sparingly — primarily for status indication, UI state, data visualization, or to add visual interest alongside the primary color.

Green
PrimaryGreen 700
AccentGreen 500
MutedGreen 200
BackgroundGreen 50
50#f6fdf9
100#dffce9
200#b6fbce
300#84f1ac
400#4ade80
500#21c45d
600#16a249
700#1c7d41
800#165a31
900#1c3f2b
950#202723
Orange
PrimaryOrange 700
AccentOrange 500
MutedOrange 200
BackgroundOrange 50
50#fffaf5
100#ffebd1
200#fedbb3
300#fdbe7c
400#fb9746
500#f96c0b
600#da510b
700#b23c0b
800#923111
900#693420
950#33231f
Red
PrimaryRed 700
AccentRed 500
MutedRed 200
BackgroundRed 50
50#fff5f6
100#ffe0e1
200#ffc7ca
300#ff9fa4
400#ff676e
500#fb2c36
600#ee1721
700#bd141c
800#96171e
900#611f22
950#331f20
Aqua
PrimaryAqua 700
AccentAqua 500
MutedAqua 200
BackgroundAqua 50
50#f5fffd
100#ccfff5
200#5cffde
300#1efad9
400#02d9c0
500#00a896
600#008f83
700#00756c
800#075f59
900#114642
950#101e1d
Blue
PrimaryBlue 700
AccentBlue 500
MutedBlue 200
BackgroundBlue 50
50#f5faff
100#e5f1ff
200#cce4ff
300#a3d0ff
400#75b5ff
500#5296ff
600#3c79f6
700#1e57eb
800#1e47c2
900#28448a
950#283048
Yellow
PrimaryYellow 700
AccentYellow 500
MutedYellow 200
BackgroundYellow 50
50#fffbeb
100#fef2c7
200#fde38a
300#fdcf4c
400#fcba23
500#f49709
600#da7205
700#b54f08
800#933d0d
900#723213
950#371d11

Utility colors

Section titled “Utility colors”

Utility colors (black and white) can be used as needed for text, backgrounds, and other elements. Service Black is #1F1B21, used in both light and dark modes. In UI contexts, Service Black should be used for text in light mode and backgrounds in dark mode.

Utility
Black#000000
White#ffffff
Service Black#1F1B21

Dark mode

Section titled “Dark mode”

In dark mode contexts, all palette color values are inverted by scale position. For example, Violet 50 in light mode maps to Violet 950 in dark mode, Violet 100 maps to Violet 900, and so on.

Contrast and accessibility

Section titled “Contrast and accessibility”

All primary colors meet APCA Lc 75+ against white in light mode. In dark mode, most primary colors meet Lc 75+ against black, with the exceptions of violet (Lc 71) and red (Lc 65). Most primary colors also meet 75+ when placed on their respective 50 background, and all meet 60+. The Accent and Muted colors are not required to meet specific contrast ratios, but should be used with consideration for accessibility.

Light mode (Primary on background)

PaletteWhite50100200
Violet✓✓ 86✓✓ 81✓✓ 75✓ 67
Gray✓✓ 78✓✓ 75✓ 6859
Green✓✓ 75✓ 73✓ 69✓ 64
Aqua✓✓ 77✓✓ 76✓ 71✓ 63
Blue✓✓ 78✓✓ 75✓ 69✓ 61
Red✓✓ 80✓✓ 75✓ 6655
Orange✓✓ 79✓✓ 76✓ 68✓ 61
Yellow✓✓ 75✓ 72✓ 6759

Dark mode (Primary on background)

PaletteBlack50100200
Violet✓ 71✓ 69✓ 65✓ 60
Gray✓✓ 75✓ 71✓ 6458
Green✓✓ 85✓✓ 82✓✓ 77✓ 70
Aqua✓✓ 88✓✓ 86✓✓ 78✓ 71
Blue✓✓ 76✓ 70✓ 6358
Red✓ 65✓ 625850
Orange✓✓ 75✓ 71✓ 6458
Yellow✓✓ 81✓✓ 78✓ 69✓ 62

Lc 75 = Body text (minimum)
Lc 60 = Small text (non-body), UI elements
Lc 45 = Large text, minimum of 24px (bold) or 36px (regular)
Section titled “Print colors”

CMYK and spot colors are not specified as part of the design guidelines. For print materials, use the RGB values as a starting point to convert to CMYK in your design software. Work with your printer to determine the best CMYK or spot color equivalents and always request a proof to ensure color accuracy before printing large runs.

Deprecated colors

Section titled “Deprecated colors”

  • Do not use the Purple, Fuchsia, or Salmon palettes.

CSS variables

Section titled “CSS variables”
colors.hex.css
/* Pulumi Brand Colors — HEX
 * Generated from packages/lib/src/brand-colors.ts
 */


@theme {
  --color-violet-50: #f5f5ff;
  --color-violet-100: #ebebff;
  --color-violet-200: #dedbff;
  --color-violet-300: #c3bdff;
  --color-violet-400: #a697fc;
  --color-violet-500: #9077f3;
  --color-violet-600: #7952e5;
  --color-violet-700: #5a30c5;
  --color-violet-800: #492e8e;
  --color-violet-900: #392960;
  --color-violet-950: #231f33;


  --color-gray-50: #fafafa;
  --color-gray-100: #efeff0;
  --color-gray-200: #e0dfe2;
  --color-gray-300: #cbcace;
  --color-gray-400: #b3b1b9;
  --color-gray-500: #9997a0;
  --color-gray-600: #817d8c;
  --color-gray-700: #6a6675;
  --color-gray-800: #56535a;
  --color-gray-900: #46434c;
  --color-gray-950: #2e2932;


  --color-green-50: #f6fdf9;
  --color-green-100: #dffce9;
  --color-green-200: #b6fbce;
  --color-green-300: #84f1ac;
  --color-green-400: #4ade80;
  --color-green-500: #21c45d;
  --color-green-600: #16a249;
  --color-green-700: #1c7d41;
  --color-green-800: #165a31;
  --color-green-900: #1c3f2b;
  --color-green-950: #202723;


  --color-aqua-50: #f5fffd;
  --color-aqua-100: #ccfff5;
  --color-aqua-200: #5cffde;
  --color-aqua-300: #1efad9;
  --color-aqua-400: #02d9c0;
  --color-aqua-500: #00a896;
  --color-aqua-600: #008f83;
  --color-aqua-700: #00756c;
  --color-aqua-800: #075f59;
  --color-aqua-900: #114642;
  --color-aqua-950: #101e1d;


  --color-blue-50: #f5faff;
  --color-blue-100: #e5f1ff;
  --color-blue-200: #cce4ff;
  --color-blue-300: #a3d0ff;
  --color-blue-400: #75b5ff;
  --color-blue-500: #5296ff;
  --color-blue-600: #3c79f6;
  --color-blue-700: #1e57eb;
  --color-blue-800: #1e47c2;
  --color-blue-900: #28448a;
  --color-blue-950: #283048;


  --color-red-50: #fff5f6;
  --color-red-100: #ffe0e1;
  --color-red-200: #ffc7ca;
  --color-red-300: #ff9fa4;
  --color-red-400: #ff676e;
  --color-red-500: #fb2c36;
  --color-red-600: #ee1721;
  --color-red-700: #bd141c;
  --color-red-800: #96171e;
  --color-red-900: #611f22;
  --color-red-950: #331f20;


  --color-orange-50: #fffaf5;
  --color-orange-100: #ffebd1;
  --color-orange-200: #fedbb3;
  --color-orange-300: #fdbe7c;
  --color-orange-400: #fb9746;
  --color-orange-500: #f96c0b;
  --color-orange-600: #da510b;
  --color-orange-700: #b23c0b;
  --color-orange-800: #923111;
  --color-orange-900: #693420;
  --color-orange-950: #33231f;


  --color-yellow-50: #fffbeb;
  --color-yellow-100: #fef2c7;
  --color-yellow-200: #fde38a;
  --color-yellow-300: #fdcf4c;
  --color-yellow-400: #fcba23;
  --color-yellow-500: #f49709;
  --color-yellow-600: #da7205;
  --color-yellow-700: #b54f08;
  --color-yellow-800: #933d0d;
  --color-yellow-900: #723213;
  --color-yellow-950: #371d11;


  --color-black: #000000;
  --color-white: #ffffff;


  /* Semantic */
  --color-violet-primary: var(--color-violet-700);
  --color-violet-accent: var(--color-violet-500);
  --color-violet-muted: var(--color-violet-200);
  --color-violet-background: var(--color-violet-50);


  --color-gray-primary: var(--color-gray-700);
  --color-gray-accent: var(--color-gray-500);
  --color-gray-muted: var(--color-gray-200);
  --color-gray-background: var(--color-gray-50);


  --color-green-primary: var(--color-green-700);
  --color-green-accent: var(--color-green-500);
  --color-green-muted: var(--color-green-200);
  --color-green-background: var(--color-green-50);


  --color-aqua-primary: var(--color-aqua-700);
  --color-aqua-accent: var(--color-aqua-500);
  --color-aqua-muted: var(--color-aqua-200);
  --color-aqua-background: var(--color-aqua-50);


  --color-blue-primary: var(--color-blue-700);
  --color-blue-accent: var(--color-blue-500);
  --color-blue-muted: var(--color-blue-200);
  --color-blue-background: var(--color-blue-50);


  --color-red-primary: var(--color-red-700);
  --color-red-accent: var(--color-red-500);
  --color-red-muted: var(--color-red-200);
  --color-red-background: var(--color-red-50);


  --color-orange-primary: var(--color-orange-700);
  --color-orange-accent: var(--color-orange-500);
  --color-orange-muted: var(--color-orange-200);
  --color-orange-background: var(--color-orange-50);


  --color-yellow-primary: var(--color-yellow-700);
  --color-yellow-accent: var(--color-yellow-500);
  --color-yellow-muted: var(--color-yellow-200);
  --color-yellow-background: var(--color-yellow-50);


  /* Utility */
  --color-service-black: #1f1b21;
  --color-foreground: var(--color-service-black);
  --color-foreground-muted: var(--color-gray-700);
  --color-foreground-dark: var(--color-black);
  --color-background: var(--color-white);
}


@theme dark {
  --color-violet-50: #231f33;
  --color-violet-100: #392960;
  --color-violet-200: #492e8e;
  --color-violet-300: #5a30c5;
  --color-violet-400: #7952e5;
  --color-violet-500: #9077f3;
  --color-violet-600: #a697fc;
  --color-violet-700: #c3bdff;
  --color-violet-800: #dedbff;
  --color-violet-900: #ebebff;
  --color-violet-950: #f5f5ff;


  --color-gray-50: #2e2932;
  --color-gray-100: #46434c;
  --color-gray-200: #56535a;
  --color-gray-300: #6a6675;
  --color-gray-400: #817d8c;
  --color-gray-500: #9997a0;
  --color-gray-600: #b3b1b9;
  --color-gray-700: #cbcace;
  --color-gray-800: #e0dfe2;
  --color-gray-900: #efeff0;
  --color-gray-950: #fafafa;


  --color-green-50: #202723;
  --color-green-100: #1c3f2b;
  --color-green-200: #165a31;
  --color-green-300: #1c7d41;
  --color-green-400: #16a249;
  --color-green-500: #21c45d;
  --color-green-600: #4ade80;
  --color-green-700: #84f1ac;
  --color-green-800: #b6fbce;
  --color-green-900: #dffce9;
  --color-green-950: #f6fdf9;


  --color-aqua-50: #101e1d;
  --color-aqua-100: #114642;
  --color-aqua-200: #075f59;
  --color-aqua-300: #00756c;
  --color-aqua-400: #008f83;
  --color-aqua-500: #00a896;
  --color-aqua-600: #02d9c0;
  --color-aqua-700: #1efad9;
  --color-aqua-800: #5cffde;
  --color-aqua-900: #ccfff5;
  --color-aqua-950: #f5fffd;


  --color-blue-50: #283048;
  --color-blue-100: #28448a;
  --color-blue-200: #1e47c2;
  --color-blue-300: #1e57eb;
  --color-blue-400: #3c79f6;
  --color-blue-500: #5296ff;
  --color-blue-600: #75b5ff;
  --color-blue-700: #a3d0ff;
  --color-blue-800: #cce4ff;
  --color-blue-900: #e5f1ff;
  --color-blue-950: #f5faff;


  --color-red-50: #331f20;
  --color-red-100: #611f22;
  --color-red-200: #96171e;
  --color-red-300: #bd141c;
  --color-red-400: #ee1721;
  --color-red-500: #fb2c36;
  --color-red-600: #ff676e;
  --color-red-700: #ff9fa4;
  --color-red-800: #ffc7ca;
  --color-red-900: #ffe0e1;
  --color-red-950: #fff5f6;


  --color-orange-50: #33231f;
  --color-orange-100: #693420;
  --color-orange-200: #923111;
  --color-orange-300: #b23c0b;
  --color-orange-400: #da510b;
  --color-orange-500: #f96c0b;
  --color-orange-600: #fb9746;
  --color-orange-700: #fdbe7c;
  --color-orange-800: #fedbb3;
  --color-orange-900: #ffebd1;
  --color-orange-950: #fffaf5;


  --color-yellow-50: #371d11;
  --color-yellow-100: #723213;
  --color-yellow-200: #933d0d;
  --color-yellow-300: #b54f08;
  --color-yellow-400: #da7205;
  --color-yellow-500: #f49709;
  --color-yellow-600: #fcba23;
  --color-yellow-700: #fdcf4c;
  --color-yellow-800: #fde38a;
  --color-yellow-900: #fef2c7;
  --color-yellow-950: #fffbeb;


  --color-black: #000000;
  --color-white: #ffffff;


  /* Utility */
  --color-service-black: #1f1b21;
  --color-foreground: var(--color-white);
  --color-foreground-dark: var(--color-white);
  --color-background: var(--color-service-black);
}