Godot Engine Editor Icon Colours

2023/11/24

godot reference

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 LightHex DarkEngine Name
#478cbf#478cbfGodot Blue
#414042#414042Godot Gray
#000000#bfbfbfPure black
#ff0000#ff0000Pure red
#00ff00#00ff00Pure green
#0000ff#0000ffPure blue
#808080#808080GUI disabled color
#b3b3b3#363636GUI disabled light color
#699ce8#699ce8GUI highlight color
#f9f9f9#606060Scrollbar grabber highlight color
#fc7f7f#cd3838Spatial
#8da5f3#3d64dd2D
#4b70ea#1a3eac2D Dark
#8eef97#2fa139Control
#003e7a#2b74bbSelection (darker blue)
#f7f5cf#615f3aGizmo (yellow)
#80ff45#74ff34Green
#45ffa2#2cff98Aqua
#45d7ff#22ccffBlue
#8045ff#702affPurple
#ff4596#ff2781Pink
#75d1e6#41acc5Frozen gradient middle
#84ffee#49ccbaFrozen gradient bottom
#eec315#d58c0bColor track orange
#dbee15#b7d10aColor track yellow
#288027#218309Color track green
#a2d2ff#4998e3Shape resource (light blue)
#ea7940#bd5e2c3D Position track
#ff2b88#bd165f3D Rotation track
#eac840#bd9d1f3D Scale track
#3cf34e#16a827Call Method track
#2877f6#236be6Bezier Curve track
#eae440#9f9722Audio Playback track
#a448f0#9853ceAnimation Playback track
#5ad5c4#0a9c88Blend Shape track
#919191#6e6e6eBorder part
#c6ced4#828f9bNew Atlas
#5abbef#4fb2e9int
#35d4f4#27ccf0float
#4593ec#4690e7String
#ac73f1#ad76eeVector2
#f1738f#ee758eRect2
#de66f0#dc6aedVector3
#b9ec41#96ce1aTransform2D
#f74949#f77070Plane
#ec418e#ec69a3Quaternion
#ee5677#ee7991AABB
#e1ec41#b2bb19Basis
#f68f45#f49047Transform3D
#417aec#6993ecNodePath
#41ec80#2ce573RID
#55f3e3#12d5c3Object
#54ed9e#57e99fDictionary
#cf68ea#c050ddFunctions and expressions
#eac968#d9b64fTextures 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