Color
All colors that are in the ClickHouse color palette are defined as design tokens.
Core colors
In both the brand and the product, yellow is the defining color, however it is used in different ways. In the brand, it is primary, designed to draw attention and differentiate ClickHouse from other companies in our industry. In the product it’s used more as an accent, to draw attention to specific areas of interest but not to be overused.
Brand
color.palette.primary.300
Token value: #FAFF69
color.palette.neutral.900
Token value: #151515
UI chrome colors
This range of blue-greys are used for text, background and stroke colors, with neutral used in the dark theme, and slate in the light.
Neutral
0
#ffffFF
100
#F9F9F9
200
#dfdfdf
300
#c0c0c0
400
#a0a0a0
500
#808080
600
#606060
700
#414141
725
#282828
750
#1F1F1C
800
#1d1d1d
900
#151515
Slate
25
#FBFCFF
50
#F6F7FA
100
#e6e7e9
200
#cccfd3
300
#b3b6bd
400
#9a9ea7
500
#808691
600
#696e79
700
#53575f
800
#302e32
900
#161517
Feedback colors
These ranges of colors are typically used when we’re communicating status text via alerts or badges.
Info
50
#DAE6FC
100
#b5cdf9
200
#91b3f6
300
#6c9af3
400
#135be6
500
#0e44ad
600
#092e73
650
#09255B
700
#061d48
800
#05173a
900
#041330
Success
50
#e0f8e7
100
#c0f2ce
200
#a1ebb6
300
#81e59d
400
#41d76b
500
#2ac656
600
#1c8439
700
#15632b
800
#0e421d
850
#004206
900
#07210e
Warning
50
#ffedd8
100
#ffdbb1
200
#ffca8b
300
#ffb864
400
#ff9416
500
#ed8000
600
#c66b00
700
#9e5600
800
#4f2b00
900
#271500
Danger
50
#ffdddd
100
#ffbaba
200
#ff9898
300
#ff7575
400
#ff2323
500
#f10000
600
#C10000
700
#910000
800
#610000
900
#300000
Supporting colors
These colors are used mainly in our charting library.
Teal
50
#e5fffb
100
#ccfff6
200
#99ffee
300
#66ffe5
400
#33ffdd
500
#00ffd4
600
#00ccaa
700
#009980
800
#006655
850
#004237
900
#00332A
Indigo
50
#F4F1FC
100
#e4e2e9
200
#c8c5d3
300
#ada8bd
400
#918ba7
500
#766e91
600
#5e5874
700
#474257
800
#23212c
900
#18161d
Violet
50
#f6e5ff
100
#eeccff
200
#dd99ff
300
#cc66ff
400
#bb33ff
500
#aa00ff
600
#8800cc
700
#660099
800
#440066
850
#33004d
900
#220033
Fuchsia
50
#fbeff8
100
#fbc9ef
200
#fb97e2
300
#fb64d6
400
#fb32c9
500
#fb00bc
600
#cc0099
700
#990073
800
#66004d
850
#4d0039
900
#330026