Colours LUT
The markdown doesn’t really support custom colours, so see below for examples. (dark reader users make sure you disable it for this website if you wanna see accurate colours!!!!)
| Hex Light | Hex Dark | Engine Name |
|---|---|---|
| #478cbf | #478cbf | Godot Blue |
| #414042 | #414042 | Godot Gray |
| #000000 | #bfbfbf | Pure black |
| #ff0000 | #ff0000 | Pure red |
| #00ff00 | #00ff00 | Pure green |
| #0000ff | #0000ff | Pure blue |
| #808080 | #808080 | GUI disabled color |
| #b3b3b3 | #363636 | GUI disabled light color |
| #699ce8 | #699ce8 | GUI highlight color |
| #f9f9f9 | #606060 | Scrollbar grabber highlight color |
| #fc7f7f | #cd3838 | Spatial |
| #8da5f3 | #3d64dd | 2D |
| #4b70ea | #1a3eac | 2D Dark |
| #8eef97 | #2fa139 | Control |
| #003e7a | #2b74bb | Selection (darker blue) |
| #f7f5cf | #615f3a | Gizmo (yellow) |
| #80ff45 | #74ff34 | Green |
| #45ffa2 | #2cff98 | Aqua |
| #45d7ff | #22ccff | Blue |
| #8045ff | #702aff | Purple |
| #ff4596 | #ff2781 | Pink |
| #75d1e6 | #41acc5 | Frozen gradient middle |
| #84ffee | #49ccba | Frozen gradient bottom |
| #eec315 | #d58c0b | Color track orange |
| #dbee15 | #b7d10a | Color track yellow |
| #288027 | #218309 | Color track green |
| #a2d2ff | #4998e3 | Shape resource (light blue) |
| #ea7940 | #bd5e2c | 3D Position track |
| #ff2b88 | #bd165f | 3D Rotation track |
| #eac840 | #bd9d1f | 3D Scale track |
| #3cf34e | #16a827 | Call Method track |
| #2877f6 | #236be6 | Bezier Curve track |
| #eae440 | #9f9722 | Audio Playback track |
| #a448f0 | #9853ce | Animation Playback track |
| #5ad5c4 | #0a9c88 | Blend Shape track |
| #919191 | #6e6e6e | Border part |
| #c6ced4 | #828f9b | New Atlas |
| #5abbef | #4fb2e9 | int |
| #35d4f4 | #27ccf0 | float |
| #4593ec | #4690e7 | String |
| #ac73f1 | #ad76ee | Vector2 |
| #f1738f | #ee758e | Rect2 |
| #de66f0 | #dc6aed | Vector3 |
| #b9ec41 | #96ce1a | Transform2D |
| #f74949 | #f77070 | Plane |
| #ec418e | #ec69a3 | Quaternion |
| #ee5677 | #ee7991 | AABB |
| #e1ec41 | #b2bb19 | Basis |
| #f68f45 | #f49047 | Transform3D |
| #417aec | #6993ec | NodePath |
| #41ec80 | #2ce573 | RID |
| #55f3e3 | #12d5c3 | Object |
| #54ed9e | #57e99f | Dictionary |
| #cf68ea | #c050dd | Functions and expressions |
| #eac968 | #d9b64f | Textures and cubemaps |
Colour Details
Here’s all the colours. First colour is the light theme, second is dark. Then some text in each colour to show what it looks like.
Godot Blue
478cbf –> 478cbf
Example Light █
Example Dark █
Godot Gray
414042 –> 414042
Example Light █
Example Dark █
Pure black
000000 –> bfbfbf
Example Light █
Example Dark █
Pure red
ff0000 –> ff0000
Example Light █
Example Dark █
Pure green
00ff00 –> 00ff00
Example Light █
Example Dark █
Pure blue
0000ff –> 0000ff
Example Light █
Example Dark █
GUI disabled color
808080 –> 808080
Example Light █
Example Dark █
GUI disabled light color
b3b3b3 –> 363636
Example Light █
Example Dark █
GUI highlight color
699ce8 –> 699ce8
Example Light █
Example Dark █
Scrollbar grabber highlight color
f9f9f9 –> 606060
Example Light █
Example Dark █
Spatial
fc7f7f –> cd3838
Example Light █
Example Dark █
2D
8da5f3 –> 3d64dd
Example Light █
Example Dark █
2D Dark
4b70ea –> 1a3eac
Example Light █
Example Dark █
Control
8eef97 –> 2fa139
Example Light █
Example Dark █
Selection (darker blue)
003e7a –> 2b74bb
Example Light █
Example Dark █
Gizmo (yellow)
f7f5cf –> 615f3a
Example Light █
Example Dark █
Green
80ff45 –> 74ff34
Example Light █
Example Dark █
Aqua
45ffa2 –> 2cff98
Example Light █
Example Dark █
Blue
45d7ff –> 22ccff
Example Light █
Example Dark █
Purple
8045ff –> 702aff
Example Light █
Example Dark █
Pink
ff4596 –> ff2781
Example Light █
Example Dark █
Frozen gradient middle
75d1e6 –> 41acc5
Example Light █
Example Dark █
Frozen gradient bottom
84ffee –> 49ccba
Example Light █
Example Dark █
Color track orange
eec315 –> d58c0b
Example Light █
Example Dark █
Color track yellow
dbee15 –> b7d10a
Example Light █
Example Dark █
Color track green
288027 –> 218309
Example Light █
Example Dark █
Shape resource (light blue)
a2d2ff –> 4998e3
Example Light █
Example Dark █
3D Position track
ea7940 –> bd5e2c
Example Light █
Example Dark █
3D Rotation track
ff2b88 –> bd165f
Example Light █
Example Dark █
3D Scale track
eac840 –> bd9d1f
Example Light █
Example Dark █
Call Method track
3cf34e –> 16a827
Example Light █
Example Dark █
Bezier Curve track
2877f6 –> 236be6
Example Light █
Example Dark █
Audio Playback track
eae440 –> 9f9722
Example Light █
Example Dark █
Animation Playback track
a448f0 –> 9853ce
Example Light █
Example Dark █
Blend Shape track
5ad5c4 –> 0a9c88
Example Light █
Example Dark █
Border part
919191 –> 6e6e6e
Example Light █
Example Dark █
New Atlas
c6ced4 –> 828f9b
Example Light █
Example Dark █
int
5abbef –> 4fb2e9
Example Light █
Example Dark █
float
35d4f4 –> 27ccf0
Example Light █
Example Dark █
String
4593ec –> 4690e7
Example Light █
Example Dark █
Vector2
ac73f1 –> ad76ee
Example Light █
Example Dark █
Rect2
f1738f –> ee758e
Example Light █
Example Dark █
Vector3
de66f0 –> dc6aed
Example Light █
Example Dark █
Transform2D
b9ec41 –> 96ce1a
Example Light █
Example Dark █
Plane
f74949 –> f77070
Example Light █
Example Dark █
Quaternion
ec418e –> ec69a3
Example Light █
Example Dark █
AABB
ee5677 –> ee7991
Example Light █
Example Dark █
Basis
e1ec41 –> b2bb19
Example Light █
Example Dark █
Transform3D
f68f45 –> f49047
Example Light █
Example Dark █
NodePath
417aec –> 6993ec
Example Light █
Example Dark █
RID
41ec80 –> 2ce573
Example Light █
Example Dark █
Object
55f3e3 –> 12d5c3
Example Light █
Example Dark █
Dictionary
54ed9e –> 57e99f
Example Light █
Example Dark █
Functions and expressions
cf68ea –> c050dd
Example Light █
Example Dark █
Textures and cubemaps
eac968 –> d9b64f
Example Light █
Example Dark █
Why does this exist?
I really like to make my SVG icons for tools and such to be reactive to light/dark theme colouration swapping. The godot engine has a massive look up table (LUT) for hex codes that it will swap when going from light to dark themes. So long as you use these colours as a palette for your icons, they will look good in both light and dark themes. This page is mainly a reference page for the various colour codes
How to use this
This reference page is mainly intended for people who want to make editor icons for Godot. However you can assign custom icons for any global class you desire. If you are creating a plugin or some kind of code-base to be distributed to third party developers, it is highly recommended that you use these palette swapping colours so the icon will have a greater chance of having a decent contrast against the background. If not please ensure that your icon has enough internal contrast to be clearly visible. Also please be sure that your icon is not completely reliant on colour for users who may be colour blind. (A main example of this is how Node, Control, Node2D, and Node3D are all the exact same shape but differentiated by colour. That’s a bad practice in general).
If you want more resources on how to author meaningful and efficiently loaded icons, please refer to the official godot documentation on this subject
