Colorgecko

Color picker

The color picker for modern work: web, design systems, and game engines. Export HEX, RGB, OKLCh, GLSL, Unity, Unreal, and Godot. Paste any format back in and it converts to the rest. Built on CSS Color 4 color science: exact sRGB transfer and OKLCh gamut mapping, not approximations.

Paste any color format. Hex, CSS functions, shader vectors, engine constructors or raw numbers.

Mixer

Hue196°
Alpha100%
#00abe7
rgb(0 171 231)hsl(195.6 100% 45.3%)

Press C to copy · R to randomize

Output format

Common

Shaders

Game engines

Conversions

Every format from the current color. Paste any of them back in.

The formats you reach for most often, plus the shader and engine pins.

Common Hex, RGB, HSL, HSV, OKLCh and CMYK.

  • Hex
    #00abe7
  • RGB
    rgb(0 171 231)
  • HSL
    hsl(195.6 100% 45.3%)
  • HSV / HSB
    hsv(195.6, 100%, 90.6%)
  • OKLCh
    oklch(69.691% 0.14333 232.653)
  • CMYK
    cmyk(100%, 26%, 0%, 9.4%)

Shaders GLSL and HLSL vectors, gamma or linear.

  • GLSL vec3
    vec3(0.0, 0.671, 0.906)
  • HLSL float3
    float3(0.0, 0.671, 0.906)

Game engines Unity, Unreal and Godot at a glance.

  • Unity
    new Color(0.0f, 0.671f, 0.906f, 1.0f)
  • Unreal
    FLinearColor(0.0f, 0.4072f, 0.7991f, 1.0f)
  • Godot Color
    Color(0, 0.671, 0.906, 1)

Built for the cases other pickers miss

The conversions that actually change the color, not just the spelling.

  1. 01

    Gamma and linear, always labeled

    A vec3 destined for a lighting calculation is not the same as one written straight to the framebuffer. Both are shown, both are labeled, and the exact piecewise sRGB transfer function is used rather than a pow(2.2)approximation.

  2. 02

    Paste anything

    Hex, rgb(), oklch(), vec4,FLinearColor, Color(0xFF…), or three bare numbers. When the input genuinely could mean two things, you get to choose instead of being guessed at.

  3. 03

    Correct by construction

    Conversions follow CSS Color 4. Matrix inverses are derived rather than transcribed, out-of-gamut colors are mapped in OKLCh instead of clipped, and the test suite checks that every format round-trips through its own parser.

Questions

Straight answers to the questions other pickers leave implied.

Why are there two different vec3 values?

Because the same three numbers mean different colors depending on where they are used. The sRGB row holds encoded values, which is what you want when writing a color straight to the screen. The linear row has the sRGB transfer function removed, which is what you want when the value takes part in lighting, blending or filtering. Most tools only give you the first one, which is why shader colors so often come out too bright.

What formats can I paste in?

Hex in every shape including 0x and 8-digit ARGB, all the CSS color functions, HSV, CMYK, shader constructors like vec3, vec4, float3, half4 and vec3f, engine types like Unity Color, Unreal FLinearColor, Godot Color, Flutter Color, SwiftUI Color and Android Color.rgb, plus bare number triples in 0–1, 0–255 or percentages.

What happens if my input is ambiguous?

You get told. A bare “1, 0, 0” could be normalized floats or a 0–255 triple, so the tool picks the most likely reading, shows you which one it chose, and offers the alternatives as one-click buttons. No silent guessing.

Is the conversion math accurate?

Every conversion follows the CSS Color 4 specification, using the exact piecewise sRGB transfer function rather than an approximate 2.2 power curve. Reference values from the specification are checked in the test suite, and every format is verified to parse its own output back to the same color.

What happens to colors outside sRGB?

Colors from Display P3, Rec. 2020, Lab or OKLCh can fall outside what sRGB can show. Rather than clipping each channel, which shifts hue badly, the tool holds lightness and hue and walks chroma down until the color fits. Formats that can hold the original value, such as color(display-p3 …), still show it untouched.

Keep going

Guides, named colors, and dedicated conversion pages when you want to go deeper.