Colors

functions and helpers for manipulating color values

Functions

The Colors module provides comprehensive color handling capabilities. It includes support for RGB colors, color manipulations, and a rich set of predefined color names.

Key Concepts

  • RGB color representation
  • Color manipulation (blending, saturation, etc.)
  • Support for alpha channel
  • Over 350 predefined color names
  • Color space conversions (RGB, HSL, HSV)

Basic Usage

Creating Colors

; using hex notation
color1: #f00            ; short RGB
color2: #ff0000         ; full RGB
color3: #ff0000ff       ; RGB with alpha

; using predefined colors
red: #red
azure: #azure
deepPurple: #deepPurple

; extracting components
extract.red #ff0000      ; => 255
extract.green #00ff00    ; => 255
extract.blue #0000ff     ; => 255
extract.alpha #ff0000ff  ; => 255

Color Operations

; lighten/darken
dark: darken #red 0.3          ; 30% darker (= #B20000)
light: lighten #emerald 0.2    ; 20% lighter (= #60F090)

; saturation
more: saturate #green 0.4      ; 40% more saturated (= #008000)
less: desaturate #green 0.4    ; 40% less saturated (= #1A661A)

; blending
mixed: blend #red #blue                     ; 50-50 mix (= #800080)
customMix: blend.balance:0.7 #red #blue     ; 70-30 mix (= #4D00B3)

; invert colors
opposite: invert #white        ; #black

Color Space Conversions

col: #magenta       ; #FF00FF

; get HSL representation
hsl: extract.hsl col        ; #[hue:300 saturation:1.0 luminosity:0.5]

; get HSV representation
hsv: extract.hsv col        ; #[hue:300 saturation:1.0 value:1.0]

; create the same color
; starting from its HSV representation
newColor: to :color .hsv [300, 1.0 1.0]     ; #FF00FF (yep, #magenta!)

Color Palettes

baseColor: #4169e1          ; royal blue

; generate different palettes
print palette.triad baseColor
; #4169E1 #E14169 #69E141 

print palette.tetrad baseColor
; #4169E1 #E141B9 #E1B941 #41E169 

print palette.split baseColor
; #4169E1 #D941E1 #A9E141

print palette.analogous baseColor
; #41C9E1 #41A9E1 #4189E1 #4169E1 #4149E1 #5941E1

Predefined Colors

Note
Colors can be referenced using their names in various formats. For example, deep sea blue can be written as #deepSeaBlue, #deepsea or even just #deep.

Here are some of the most commonly used colors organized by hue:

Reds

  • #red, #crimson, #darkRed, #fireEngineRed, #cherryRed
  • #ruby, #burgundy, #bloodRed, #lavaRed

Blues

  • #blue, #navy, #royalBlue, #skyBlue, #azureBlue
  • #cobaltBlue, #cornflowerBlue, #denimBlue, #deepSeaBlue

Greens

  • #green, #emerald, #forestGreen, #limeGreen, #seaGreen
  • #oliveGreen, #sageGreen, #mintGreen, #jade

Purples

  • #purple, #violet, #plum, #lavender, #mauve
  • #orchid, #royalPurple, #deepPurple, #amethyst

Yellows & Oranges

  • #yellow, #gold, #amber, #mustard, #canary
  • #orange, #tangerine, #coral, #peach

Neutrals

  • #white, #black, #gray, #silver
  • #beige, #tan, #brown, #taupe

Tip
The complete list of colors can be found in the Arturo repository, although it would be most likely safe to say that any W3C color name recognized is also recognized by Arturo too.

Common Patterns

Working with Alpha

; full opacity
solid: #ff0000ff      ; red, 100% opaque

; semi-transparent
trans: #ff000080      ; red, 50% transparent