module Celestine::Docs::C_DSL_AND_CREATIVE::COLORS_PALETTES_AND_DATAVIZ

Overview

Color Engine, Designer Palettes & Micro Data-Viz

Celestine includes a built-in color engine (Celestine::Color), curated designer palettes (Celestine::Palette), responsive micro data-visualization components (sparkline, progress_ring, donut_slice), and RFC 2397 Data URI export helpers.

Executive Summary & Key Topics

Topic Method / Anchor Description
Color Engine & Manipulations .topic_01_color_engine Hex, RGB, HSL parsing and transformations.
Curated Designer Palettes .topic_02_palettes Ready-to-use color schemes.
Micro Data-Visualization .topic_03_dataviz Responsive sparklines, progress rings, and donut slices.
Data URI Export .topic_04_data_uri_export Export directly to base64 or utf8 data URIs for inline HTML or CSS usage.

Related Guides & Source References

Defined in:

docs/c_dsl_and_creative/colors_palettes_and_dataviz.cr

Class Method Summary

Class Method Detail

def self.topic_01_color_engine : Nil #

Color Engine & Manipulations: Hex, RGB, HSL parsing and transformations.

Celestine::Color allows parsing hex (3, 4, 6, 8 digit), RGB, or HSL strings, and performing programmatic color adjustments:

  • lighten(amount) / darken(amount)
  • saturate(amount) / desaturate(amount)
  • complementary
  • mix(other_color, weight)
  • with_alpha(alpha)

Working Examples

base = Celestine::Color.hex("#3b82f6")
highlight = base.lighten(0.15)
shadow = base.darken(0.2)

[View source]
def self.topic_02_palettes : Nil #

Curated Designer Palettes: Ready-to-use color schemes.

Celestine comes bundled with designer-grade palettes:

Working Examples

Celestine.draw do |ctx|
  ctx.circle do |c|
    c.cx = 50
    c.cy = 50
    c.r = 30
    c.fill = Celestine::Palette::Nord::Frost1
    c.stroke = Celestine::Palette::Nord::PolarNight0
  end
end

[View source]
def self.topic_03_dataviz : Nil #

Micro Data-Visualization: Responsive sparklines, progress rings, and donut slices.

Render data-driven graphics with minimal boilerplate:

  • ctx.sparkline(data, x, y, width, height, smooth: true, fill: "...")
  • ctx.progress_ring(cx, cy, radius, progress: 0.75, fill_color: "...")
  • ctx.donut_slice(cx, cy, r_inner, r_outer, start_angle, end_angle)

Working Examples

Celestine.draw do |ctx|
  ctx.sparkline([10, 45, 30, 80, 50, 95], x: 10, y: 10, width: 200, height: 60, smooth: true)
  ctx.progress_ring(cx: 280, cy: 40, radius: 25, progress: 0.85, fill_color: "#10b981")
end

[View source]
def self.topic_04_data_uri_export : Nil #

Data URI Export: Export directly to base64 or utf8 data URIs for inline HTML or CSS usage.

Export SVG directly as an RFC 2397 Data URI without intermediate file writing:

Working Examples

uri = Celestine.to_data_uri(:utf8) do |ctx|
  ctx.circle { |c| c.cx = 10; c.cy = 10; c.r = 5; c.fill = "red" }
end

[View source]