Colors Custom Properties
Color palette. Brut provides six colors plus gray at nine shades each. There are also two shades each of black and white. Colors are available as --color-XXX where XXX is a value from darkest to 900, with 100 being the darkest and lightest being the lightest. As there are nine shades in each color’s scale, that means the values are 100, 200, 300, 400, 500, 600, 700, 800, 900. For black and white, there is --black or --white which is designed to be pure black or white, respectively, and then --black-ish and --white-ish, which are designed to be a touch lighter or darker, respectively. To use your own colors, the simplest thing to do is override these variables. This works well if you are satisfied with six total colors plus gray and nine shades of each. If not, you will need to define new variables and then declare the requisite classes.
Blue
Blues
--blue-100
The darkest shade of blue
- Type:
-
"<color>" - Value:
-
#000E1C
--blue-200
The second darkest shade of blue
- Type:
-
"<color>" - Value:
-
#00172F
--blue-300
The third darkest shade of blue
- Type:
-
"<color>" - Value:
-
#002E5E
--blue-400
The shade just darker than middle of blue
- Type:
-
"<color>" - Value:
-
#004E9E
--blue-500
The middle shade of blue
- Type:
-
"<color>" - Value:
-
#0069d5
--blue-600
The shade just lighter than middle of blue
- Type:
-
"<color>" - Value:
-
#50A6FF
--blue-700
The third lightest shade of blue
- Type:
-
"<color>" - Value:
-
#A9D3FF
--blue-800
The second lightest shade of blue
- Type:
-
"<color>" - Value:
-
#E4F1FF
--blue-900
The lightest shade of blue
- Type:
-
"<color>" - Value:
-
#F9FCFF
Gray
Grays
--gray-100
The darkest shade of gray
- Type:
-
"<color>" - Value:
-
#0F0F10
--gray-200
The second darkest shade of gray
- Type:
-
"<color>" - Value:
-
#1A1A1B
--gray-300
The third darkest shade of gray
- Type:
-
"<color>" - Value:
-
#333336
--gray-400
The shade just darker than middle of gray
- Type:
-
"<color>" - Value:
-
#56565B
--gray-500
The middle shade of gray
- Type:
-
"<color>" - Value:
-
#74747B
--gray-600
The shade just lighter than middle of gray
- Type:
-
"<color>" - Value:
-
#ADADB1
--gray-700
The third lightest shade of gray
- Type:
-
"<color>" - Value:
-
#D7D7D9
--gray-800
The second lightest shade of gray
- Type:
-
"<color>" - Value:
-
#F2F2F3
--gray-900
The lightest shade of gray
- Type:
-
"<color>" - Value:
-
#FCFCFC
Green
Greens
--green-100
The darkest shade of green
- Type:
-
"<color>" - Value:
-
#071B0E
--green-200
The second darkest shade of green
- Type:
-
"<color>" - Value:
-
#0C2D17
--green-300
The third darkest shade of green
- Type:
-
"<color>" - Value:
-
#175A2E
--green-400
The shade just darker than middle of green
- Type:
-
"<color>" - Value:
-
#27984D
--green-500
The middle shade of green
- Type:
-
"<color>" - Value:
-
#37CB69
--green-600
The shade just lighter than middle of green
- Type:
-
"<color>" - Value:
-
#89E0A6
--green-700
The third lightest shade of green
- Type:
-
"<color>" - Value:
-
#C5F0D4
--green-800
The second lightest shade of green
- Type:
-
"<color>" - Value:
-
#EDFAF2
--green-900
The lightest shade of green
- Type:
-
"<color>" - Value:
-
#FBFEFC
Orange
Oranges
--orange-100
The darkest shade of orange
- Type:
-
"<color>" - Value:
-
#1E0E00
--orange-200
The second darkest shade of orange
- Type:
-
"<color>" - Value:
-
#331800
--orange-300
The third darkest shade of orange
- Type:
-
"<color>" - Value:
-
#673000
--orange-400
The shade just darker than middle of orange
- Type:
-
"<color>" - Value:
-
#AD5000
--orange-500
The middle shade of orange
- Type:
-
"<color>" - Value:
-
#EA6C00
--orange-600
The shade just lighter than middle of orange
- Type:
-
"<color>" - Value:
-
#FFA75C
--orange-700
The third lightest shade of orange
- Type:
-
"<color>" - Value:
-
#FFD4AF
--orange-800
The second lightest shade of orange
- Type:
-
"<color>" - Value:
-
#FFF2E6
--orange-900
The lightest shade of orange
- Type:
-
"<color>" - Value:
-
#FFFCF9
Purple
Purples
--purple-100
The darkest shade of purple
- Type:
-
"<color>" - Value:
-
#0E071B
--purple-200
The second darkest shade of purple
- Type:
-
"<color>" - Value:
-
#170C2D
--purple-300
The third darkest shade of purple
- Type:
-
"<color>" - Value:
-
#2E175A
--purple-400
The shade just darker than middle of purple
- Type:
-
"<color>" - Value:
-
#4D2798
--purple-500
The middle shade of purple
- Type:
-
"<color>" - Value:
-
#6937cb
--purple-600
The shade just lighter than middle of purple
- Type:
-
"<color>" - Value:
-
#A689E0
--purple-700
The third lightest shade of purple
- Type:
-
"<color>" - Value:
-
#D4C5F0
--purple-800
The second lightest shade of purple
- Type:
-
"<color>" - Value:
-
#F2EDFA
--purple-900
The lightest shade of purple
- Type:
-
"<color>" - Value:
-
#FCFBFE
Red
Reds
--red-100
The darkest shade of red
- Type:
-
"<color>" - Value:
-
#1E0200
--red-200
The second darkest shade of red
- Type:
-
"<color>" - Value:
-
#320300
--red-300
The third darkest shade of red
- Type:
-
"<color>" - Value:
-
#640600
--red-400
The shade just darker than middle of red
- Type:
-
"<color>" - Value:
-
#A80A00
--red-500
The middle shade of red
- Type:
-
"<color>" - Value:
-
#E30D00
--red-600
The shade just lighter than middle of red
- Type:
-
"<color>" - Value:
-
#FF6258
--red-700
The third lightest shade of red
- Type:
-
"<color>" - Value:
-
#FFB2AD
--red-800
The second lightest shade of red
- Type:
-
"<color>" - Value:
-
#FFE7E6
--red-900
The lightest shade of red
- Type:
-
"<color>" - Value:
-
#FFFAF9
Yellow
Yellows
--yellow-100
The darkest shade of yellow
- Type:
-
"<color>" - Value:
-
#242402
--yellow-200
The second darkest shade of yellow
- Type:
-
"<color>" - Value:
-
#3D3D04
--yellow-300
The third darkest shade of yellow
- Type:
-
"<color>" - Value:
-
#797907
--yellow-400
The shade just darker than middle of yellow
- Type:
-
"<color>" - Value:
-
#CCCC0C
--yellow-500
The middle shade of yellow
- Type:
-
"<color>" - Value:
-
#F3F331
--yellow-600
The shade just lighter than middle of yellow
- Type:
-
"<color>" - Value:
-
#F8F885
--yellow-700
The third lightest shade of yellow
- Type:
-
"<color>" - Value:
-
#FCFCC3
--yellow-800
The second lightest shade of yellow
- Type:
-
"<color>" - Value:
-
#FEFEEC
--yellow-900
The lightest shade of yellow
- Type:
-
"<color>" - Value:
-
#FFFFFB
Black
Blacks
--black
Pure black
- Type:
-
"<color>" - Value:
-
#000000
--black-ish
Very slightly lighter than pure black
- Type:
-
"<color>" - Value:
-
#131313
White
Whites
--white
Pure white.
- Type:
-
"<color>" - Value:
-
#FFFFFF
--white-ish
Very slightly darker than pure white
- Type:
-
"<color>" - Value:
-
#FBFBFB