Skip to main content
Version: 0.1.22

Format conversion

Output colours in different formats for various applications.

Format examples​

The same colour in different formats:

{{- $bg := get . "background" }}

HEX:          {{ $bg | hex }}           # #1e1e2e
HEX_ALPHA:    {{ $bg | hexAlpha }}      # #1e1e2eff
HEX_NO_HASH:  {{ $bg | hexNoHash }}     # 1e1e2e
ARGB:         {{ $bg | argb }}          # #ff1e1e2e
RGB:          {{ $bg | rgb }}           # rgb(30, 30, 46)
RGBA:         {{ $bg | rgba }}          # rgba(30, 30, 46, 1.00)
RGB_DECIMAL:  {{ $bg | rgbDecimal }}    # 30,30,46
RGBA_DECIMAL: {{ $bg | rgbaDecimal }}   # 30,30,46,1.0
RGB_SPACES:   {{ $bg | rgbSpaces }}     # 30 30 46

Platform-specific formats​

Kitty, Alacritty, Ghostty (hex)​

background {{ get . "background" | hex }}
foreground {{ get . "foreground" | hex }}

Hyprland (rgb decimal)​

$background = rgb({{ get . "background" | rgbDecimal }})
$foreground = rgb({{ get . "foreground" | rgbDecimal }})

Hyprlock (rgba decimal)​

$backgroundAlpha = rgba({{ get . "background" | withAlpha 0.93 | rgbaDecimal }})

CSS stylesheets​

background-color: {{ get . "background" | rgba }};
border-color: {{ get . "accent1" | hex }};
box-shadow: 0 2px 4px {{ get . "shadow" | rgba }};

Qt5ct/Qt6ct (argb)​

Qt uses alpha-first format:

{{ get . "background" | argb }}

Dunst (hex with alpha)​

background = "{{ get . "background" | withAlpha 0.9 | hexAlpha }}"

Zellij KDL (space-separated)​

bg "{{ get . "background" | rgbSpaces }}"

Konsole (comma-separated RGB)​

[Background]
Color={{ get . "background" | rgbDecimal }}

Working with alpha​

Colours with default alpha​

Most colours are fully opaque (alpha = 255). Two exceptions:

  • scrim: 32% opacity for modal overlays
  • shadow: 15% opacity for elevation shadows
# Already has alpha
{{ get . "scrim" | rgba }}   # rgba(0, 0, 0, 0.32)
{{ get . "shadow" | rgba }}  # rgba(0, 0, 0, 0.15)

Custom alpha values​

# Semi-transparent background
{{ get . "background" | withAlpha 0.85 | rgba }}
# rgba(30, 30, 46, 0.85)

# Selection highlight
{{ get . "accent1" | withAlpha 0.3 | hexAlpha }}
# #89b4fa4d

# Multiple transparency levels
selection   {{ get . "accent1" | withAlpha 0.3 | hex }}
hover       {{ get . "accent1" | withAlpha 0.5 | hex }}
active      {{ get . "accent1" | hex }}

Complete example​

A template using multiple formats:

# Theme: {{ themeType . }}
# Generated by Tinct

{{- $bg := get . "background" }}
{{- $fg := get . "foreground" }}
{{- $accent := get . "accent1" }}

# Hex format (terminals)
background {{ $bg | hex }}
foreground {{ $fg | hex }}
accent {{ $accent | hex }}

# RGB decimal (Hyprland)
$background = rgb({{ $bg | rgbDecimal }})
$foreground = rgb({{ $fg | rgbDecimal }})
$accent = rgb({{ $accent | rgbDecimal }})

# RGBA (overlays)
overlay {{ get . "scrim" | rgba }}
shadow {{ get . "shadow" | rgba }}
selection {{ $accent | withAlpha 0.3 | rgba }}

# CSS variables
:root {
    --bg: {{ $bg | hex }};
    --fg: {{ $fg | hex }};
    --accent: {{ $accent | hex }};
    --overlay: {{ get . "scrim" | rgba }};
}

See also​