Godot 4.0: Color Picker

Godot 4.0: Color Picker

Designing for the rising star open-source game engine.

  • UX Designer
  • 1 Month
  • Released March 2023
  • Desktop
  • Godot
What
I volunteered my time to the Godot team to design the color picker for Godot 4.0.
Why
The goal was to expand the tool’s capabilities while keeping it fast, clear, and accessible for a wide range of workflows.
How
Research, wireframing, and rapid prototyping. Engineering done as a Google “Summer of Code” project.
Result

Shipped in Godot 4.0March 2023

Credited in the beta 3 announcement

See more results

Problem

Expand the picker with a lean team of volunteers.

Godot is a free and open-source game engine used to create 2D and 3D games across desktop, mobile, and web platforms. It offers a lightweight, scriptable, and highly extensible environment, built by a strong developer community.

BeforeGodot 3.4.4
Godot 3.4.4 color picker
Starting pointThe unfinished 4.0 branch
The color picker on the unfinished Godot 4.0 branch in spring 2022, before the redesign
The briefGoals for 4.0
Goals
  1. Switch picker shapes from the picker itself
  2. Sliders that are easier to target and read
  3. Values that are easier to compare and edit
  4. Swatches you can add, reorder and remove
  5. All of it in a compact layout
  6. Room for more color models
  7. An OKHSL color model

Challenges

Where the old picker fell short, and what stood in the way.

A minimal start

While the old picker was serviceable, there was a lot of room to modernize and enable creators.

Picker shapes

The picker area at the top was functional, but newer approaches to HSV picking have grown in popularity and are easier to understand.

Ambitious features

OKHSL and HDR support aren’t easy additions, but the team felt they were important.

Solution

More picker shapes, more color models, room for HDR, and a compact layout.

Default State

The updated design supports multiple color models and alpha control, leaves room for HDR values, and keeps a compact layout that works well across screen sizes.

Color picker update, default state: the picker annotated with notes on the eye dropper, sliders mode tabs, color sliders, spinner boxes, hex value, swatches, recent colors and the picker shape dropdown

Dense by design: more packed than I’d normally make it, but the team liked having one annotated sheet to work from.

Sample States

It builds on the strengths of the previous version while improving usability and making room for more precise and expressive color work, whether you’re building tools, tuning shaders, or designing UI.

Color picker update, sample states: the default state and four samples with rectangle, circle, rectangle wheel and triangle wheel picker shapes, RGB and HSV sliders, colorized and uncolorized, with swatches and recent colors expanded or collapsed

Process

Six rounds, 26 iterations, one versatile new picker.

Research

I did a survey of color pickers across creative tools, game engines, and online resources. Compiling notes into Miro I gave reports back to the team and we narrowed down to what we thought was important as our foundation.

OKHSV comparison of HSV, HSL and perceptual pickers
Evil Martians' OKLCH Color Picker and Converter, with lightness, chroma and hue graphs and a 3D gamut
Google's color picker from search results, with HEX, RGB, CMYK, HSV and HSL
A color conversion tool listing one color in HEX, RGB, CMYK, LAB, HSL, XYZ, LUV and HWB
Adobe Photoshop color picker
Unreal Engine color picker
Adobe Photoshop 32-bit color picker
Godot 4.0 color picker, in progress
Substance Painter material panel
Godot 3.4.4 color picker
Substance Painter base color picker
A desktop app's Color Chooser dialog: a hue strip over a saturation and brightness square, with RGB, HSL, hex and CMYK fields
Unity color picker, dark theme
Substance Designer color editor
Substance Designer output color parameters
A web color picker with RGB, HSV and CMYK fields and three analogous swatches
Unity HDR color picker, light theme
Figma's color picker, with a contrast ratio readout and the page's colors

Various color pickers from my research.

Design Decisions

Build the foundation now; leave room for what’s next.

Picker shapes

People think about color in different ways, so we supported several shapes instead of just one.

Early adopters of OKHSL

We wanted to get ahead of OKHSL as a color model, so it shipped in 4.0 alongside RGB and HSV.

HDR pushed to backlog

We were interested in HDR, but it was out of scope for 4.0; the design left room for it, and it arrived in 4.5.

Iterations

Six rounds took the design from broad strokes to granular implementation: early rounds settled the layout, later ones dial in each control.

  1. Round 1
  2. Round 2
  3. Round 3
  4. Round 4
  5. Round 5
  6. Round 6

Round 1
Color picker wireframe, Reference layout
Callouts for version A: Color Mode (RGB, HSV, HSB, OKHSB, OKHSV); Picker Shape (Square, Circle, Triangle, Triangle and Ring); Previous and New Colors; radio button determines the vertical slider next to the shape; enable or disable sRGB, provide sRGB hex regardless; HDR options Standard (disabled), HDR, RawColor picker wireframe, version A
Color picker wireframe, version BCallout for version B: radio buttons determine the vertical slider next to the shape
Round 2
Color picker wireframe, Version C
Color picker wireframe, Version D
Color picker wireframe, Version E
Color picker wireframe, Version F
Color picker wireframe, Version G
Round 3
Color picker wireframe, Version H
Color picker wireframe, Version I
Color picker wireframe, Version J
Color picker wireframe, Version K
Color picker wireframe, Version L
Round 4
Color picker wireframe, Version M
Color picker wireframe, Version N
Color picker wireframe, Version O
Color picker wireframe, Version P
Color picker wireframe, Version Q
Round 5
Color picker wireframe, Version R
Color picker wireframe, Version S
Color picker wireframe, Version T
Color picker wireframe, Version U
Round 6
Color picker in Adobe XD, Version V
Color picker in Adobe XD, Version W
Color picker in Adobe XD, Version X
Color picker in Adobe XD, Version Y
Color picker in Adobe XD, Version Z

Picker Shapes

Find the color picker that suits you.

Color pickers are a personal preference for artists, designers, and engineers alike, so we offered a range of shapes, each one click away.

Exploring them planted the seed for my Color Taylor project, which is worth a look too.

HSV Rectangle

  • Hue on slider
  • Saturation along X axis
  • Value along Y axis

HSV Wheel

  • Hue as a ring around the square
  • Saturation along X axis
  • Value along Y axis

VHS Circle

  • Hue around the circle
  • Saturation out from the center
  • Value on the side slider

OKHSL Circle

  • Hue around the circle
  • Saturation out from the center
  • Lightness on the side slider
  • Every hue looks equally bright

Outcomes

Godot 4.0 was released in March 2023.

Shipped in Godot 4.0

  • A color mode selector for RGB, HSV, RAW and OKHSL
  • Picker shapes chosen from the picker itself
  • Swatches you can add, and reorder by dragging
  • Recent colors
  • An option for uncolorized sliders

Added in 4.5: HDR as an intensity slider. #103583

Built by Vitika as a Google Summer of Code 2022 project (#62075 refactor, #62910 UX), mentored by Rémi Verschelde and Tomasz Chabora, from my wireframes. OKHSL came from K. S. Ernest (iFire) Lee (#59786).

On GitHub

My wireframes went on the Refactor ColorPicker proposal on April 14, 2022. The ColorPicker UX pull request, a Google Summer of Code 2022 project, credits them as its UX reference and was merged on October 7, 2022.

Also in Godot 4.0

Two editor icons I designed to help engineers along the way.

Community Reaction

[Godot’s] rise to one of the fastest-growing projects on GitHub

GitHubGodot 4.0 Release Party

Godot 4.0 is an excellent upgrade

It’s FOSSon the 4.0 release

Switching to Godot and running the game was fast. I mean really really fast.

Casey YanoCo-creator of Slay the Spire 2

Since Godot 4.0

Nearly every Godot project reaches for the color picker somewhere:
UI themes, materials, lights, shaders, environments.
The picker shipped in Godot 4.0 and has been in every release since.

27.9Mdownloads and installs, across GitHub, Google Play, Steam and Flathub
118kstars on the Godot repository
47%of GMTK Game Jam 2026 entries, up from 12% in 2020
Godot went from 12% to 47%!GMTK Game Jam entries by engine
GMTK Game Jam entries by engine, 2020 to 2026: share of entries, or number of gamesBy share, Godot grew from 12% of entries in 2020 to 47% in 2026, the largest share. By count, Godot games went from 950 in 2022 to about 4,900 in 2026 as the jam grew from 6,078 to 10,511 games.0%25%50%75%100%GodotEngine AEngine BEngine COther engines11%3%5%34%47%2020202120222023202420252026Godot 4.0, March 2023
Show as a table
JamGamesGodotEngine AEngine BEngine COther engines
2020not reported12%62%11%not reported15%
2021not reported13%62%9%not reported16%
20226,07816% (950)61% (3,716)6% (377)not reported17% (1,035)
20236,83519% (1,278)59% (4,062)5% (363)not reported17% (1,132)
20247,71137% (2,838)43% (3,324)5% (389)5% (383)10% (777)
20259,72439% (3,765)41% (3,960)5% (487)4% (439)11% (1,073)
202610,51147% (4,900)34% (3,600)5% (498)3% (319)11% (1,194)

Shares with game counts in brackets. GMTK began listing Engine C separately in 2024 and publishing game counts in 2022. Other engines is what remains after the named engines. The 2026 counts for Godot and Engine A are rounded in the source.

Hits made with Godot 4

Buckshot Roulette box art
8 millionsold on PC, December 2025Buckshot Roulette Mike KlubnikaSource
Slay the Spire 2 box art
3 millionsold in early access, March 2026Slay the Spire 2 Mega CritSource
Dome Keeper box art
1.4 millionsold, August 2025Dome Keeper BippinbitsSource
Halls of Torment box art
1 millionsold on Steam, October 2024Halls of Torment Chasing CarrotsSource
Crown Gambit box art
82MetascoreCrown Gambit Wild WitsSource

Takeaways

1

Open source

Working on open source is fun and exciting.

2

Color models

I love color models and working in this niche between tech, art, and math.

3

Tools for creators

I love working on tools that enable creators.

This project inspired:

Color Taylor

A color picker that shows how color models move together.

More Work