Skip to content

Color

The color rule sets the text color of a Widget.

Syntax

color: <COLOR> | auto [<PERCENTAGE>];

Example

This example sets a different text color to three different widgets.

from textual.app import App
from textual.widgets import Static


class ColorApp(App):
    def compose(self):
        yield Static("I'm red!", id="static1")
        yield Static("I'm rgb(0, 255, 0)!", id="static2")
        yield Static("I'm hsl(240, 100%, 50%)!", id="static3")


app = ColorApp(css_path="color.css")
Static {
    height:1fr;
    content-align: center middle;
}    
#static1 {
    color: red;
}
#static2 {
    color: rgb(0, 255, 0);
}
#static3 {
    color: hsl(240, 100%, 50%)
}

ColorApp I'm red! I'm rgb(0, 255, 0)! I'm hsl(240, 100%, 50%)!

CSS

/* Blue text */
color: blue;

/* 20% red text */
color: red 20%;

/* RGB color */
color: rgb(100,120,200);

/* Automatically choose color with suitable contrast for readability */
color: auto;

Python

You can use the same syntax as CSS, or explicitly set a Color object.

# Set blue text
widget.styles.color = "blue"

from textual.color import Color
# Set with a color object
widget.styles.color = Color.parse("pink")