ShaderBattle

Start here · lesson 2 of 2 · Beginner · about 5 min

Colors are four numbers

You will build: Match the green. The Colors panel shows its hex code — convert it to floats.

Start this lesson All lessons
The picture produced by the shader in the lesson "Colors are four numbers"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

A pixel's output is float4(r, g, b, a). Each channel runs from 0.0 to 1.0, not 0–255. So 0.5 is about 128. (Alpha is ignored on this page; in Unity it matters for transparent shaders.)

To convert from a hex color: take each byte and divide by 255.

Hex byteDecimal÷ 255
FF2551.0
80128≈ 0.5
0000.0

Colors add light, like a monitor: red + green = yellow, all three at full = white, all zero = black.

Try it in your own language

The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.

Start coding

Go deeper

Concept explainers with a live example: cosine palette.

Part of the learning paths: From zero to ray marching, From Shadertoy to Unity, Shader art basics.

More in Start here