Studio
  • Why Studio?
  • Getting Started
  • Setting up Studio
    • Import from Tokens Studio for Figma
    • Import from Figma variables
  • Connect Studio to Figma
    • Using Tokens Studio for Figma
    • Using Companion by Tokens Studio
  • Connect Studio to Code
  • Platform
    • Features
      • Tokens
        • Token Sets
        • Token flow
      • Themes
        • Theme Groups and Theme Options
      • Configuration
      • Releases
    • Platform
      • Accounts
      • Organisation
      • Project
      • API keys
      • Inviting members
  • GRAPH ENGINE
    • Introduction
    • Editor
    • Creating a Graph Based Set
    • Nodes
    • Types
    • Editing
    • Available Nodes
      • Accessibility
        • Color Blindness
      • Array
        • Array Filter
        • Array Find
        • Arrify
        • Concat
        • Flatten
        • Index Array
        • Inject Item
        • Array Length
        • Array Push
        • Remove Item
        • Replace Item
        • Reverse Array
        • Slice Array
        • Sort Array
        • Array Map
      • Color
        • Color To String
        • Color Wheel
        • Contrast
        • Contrasting Alpha
        • Contrasting Color
        • Contrasting from Array
        • Convert Color
        • Create Color
        • Darken Color
        • Deconstruct Color
        • Delta E
        • Distance
        • Flatten Alpha
        • Lighten Color
        • Match Alpha
        • Mix Colors
        • Name Color
        • Poline
        • Range
        • Scale Colors
        • Sort Colors By Distance
        • String To Color
      • CSS
        • CSS Accessible Clamp
        • CSS Box
        • CSS Function
        • CSS Map
      • Curves
        • Bezier Curve
        • Construct Float Curve
        • Deconstruct Float Curve
        • Flip Float Curve
        • Preset Bezier Curves
        • Sample Array from Float Curve
        • Sample Curve
        • Sample Float Curve
      • Design Tokens
        • Array To Set
        • Create Border
        • Create Border Design Token
        • Create Box Shadow
        • Create Box Shadow Design Token
        • Create Design Token
        • Create Reference
        • Create Typography
        • Create Typography Design Token
        • Destruct Token
        • External Token Set
        • Extract Token
        • Flatten Token Sets
        • Group Tokens
        • Inline Tokens
        • Invert Token Set
        • Leonardo Color
        • Leonardo Theme
        • Name Tokens
        • Preview Typography
        • Resolve Tokens
        • Set To Array
        • Ungroup Tokens
        • Group Token Array
        • Ungroup Token Array
      • Figma
        • Code Syntax
        • Publish Varibales
        • Scope All
        • Scope by Type
        • Scope Color
        • Scope Number
        • Scope String
      • Generic
        • Constant
        • Delay
        • Input
        • Object Merge
        • Note
        • Object Path
        • Objectify
        • Output
        • Panic
        • Passthrough
        • Subgraph
        • Time
      • Gradient
        • Gradient Stop
      • Logic
        • And
        • Compare
        • If
        • Not
        • Or
        • Switch
      • Math
        • Absolute
        • Add
        • Add Variadic
        • Ceiling
        • Clamp
        • Closest Number
        • Cosine
        • Count
        • Difference
        • Divide
        • Divide Variadic
        • Evaluate Math
        • Exponentiation
        • Floor
        • Fluid
        • Lerp
        • Modulo
        • Multiply
        • Multiply Variadic
        • Power
        • Random
        • Range Mapping
        • Round
        • Sine
        • Snap
        • Square Root
        • Subtract
        • Subtract Variadic
        • Tangent
      • Preview
        • Color Compare
        • Color Scale
        • Color Swatch
        • Math Expression
        • Number
        • Preview Curve
      • Search
        • Find First Match
        • Linear Search
      • Series
        • Alternating Series
        • Arithmetic Series
        • Exponential Decay
        • Fibonacci Series
        • Geometric Series
        • Harmonic Series
        • Inverse Linear Mapping
        • Linear Space
        • Power Series
      • String
        • Case Convert
        • Interpolation
        • Join Array
        • Lowercase
        • Normalize
        • Pad
        • Regex
        • Replace
        • Split String
        • Stringify
        • Uppercase
      • Typography
        • Base Font Size
      • Typing
        • Assert Defined
        • Has Value
        • Parse Number
        • Parse Unit
        • Pass Unit
      • Vector2
        • Create
        • Destructure
      • Naming
        • Alphabetic Scale
        • Alphanumeric Scale
        • Greek Letter
        • Hierarchy Level
        • Numeric Scale
        • T-Shirt Size
  • PLUGINS
    • Tokens Studio for Figma Plugin
    • Companion by Tokens Studio
    • Tokens Studio for Framer Plugin
Powered by GitBook
On this page
  • What It Does
  • Inputs
  • Outputs
  • How to Use It
  • Tips
  • See Also
  • Use Cases
Edit on GitHub
  1. GRAPH ENGINE
  2. Available Nodes
  3. Color

Color To String

PreviousColorNextColor Wheel

Last updated 1 month ago

What It Does

Converts a color object into a text representation in a specified format. This is useful when you need to output colors as hex codes, CSS color functions, or other text-based formats.

Inputs

Name
Description
Type
Required

color

The color to convert to text

Color

No

space

The format to output (hex, rgb, hsl, etc.)

String

No

Outputs

Name
Description
Type

value

The color as a text string

String

How to Use It

  1. Drag the Color to String node into your graph.

  2. Drag the Input node and set the input type to "color". Set the input color (e.g. #2669F4)

  3. Connect the output to the "color" input.

  4. Choose an output format from the "space" dropdown (e.g., "hsl" for "hsl(225,0,0) format).

  5. Run the graph—your output will be a text string like "#2669F4" or "hsl(220.49 90.351% 55.294%)".

Tips

  • The "hex" format is most common for web development and design tools.

  • Other formats like "rgb" or "hsl" provide more readable information about the color's components.

See Also

Use Cases

  • CSS Output: Generate color strings for use in CSS stylesheets or style objects.

  • Design Token Export: Convert colors to string format for export to design token files.

  • Color Communication: Create readable text versions of colors for documentation or sharing.

: For converting text color representations back into color objects.

: For breaking a color into its individual component values.

String to Color
Deconstruct Color