Skip to the content.

How to convert angles to colors (and vice versa)

Angle → Color

  1. Convert given angle radians to degrees
  2. Account for possible negative values → +360
  3. Account for color placement on our specific wheel.
  4. Convert degrees to hue
    • Assume each degree corresponds to a specific hue → % 360
    • Hue → HSV: Color = hue, saturation, value.
    • Assume full saturation and value for our wheel (1f).
  5. Convert HSV to Color (an int)
    • See a handy method inside Color class

Color → Angle

  1. What is a RGB color as an int? Read this part in Color Picker spec
  2. Color (int) → HSV, again assume full saturation and value. See ColorUtils documentation for a handy method.
  3. HSV → hue
    • HSV is in the form of a float array with 3 values… which of these three do you need?
  4. Hue → radians (see Angle to Color steps backward)

:img Relationship between cos sin x y and t, 80%, width

HSV vs HSL

See this image https://i.stack.imgur.com/nX8NL.png

HSV Model :img Upside-down conical Diagram, with hues differing around the circle, chroma increasing from center to radius, and value from black (bottom) to top (full color)

HSL Model :img A diagram resembling a double-cone with a circle as its base in the center, with hues differing around the circle, chroma increasing from center to radius, and lightness from bottom (black) to top (white)