The <color> JavaFX CSS data type allows developers to specify a color to be used as a background, stroke, or fill. The <color> property type represents a single colour (rather than for example a gradient.

A <color> may also include an alpha-channel transparency value, indicating how the color should be mixed with its background.

A <color> value in JavaFX can be defined in the following ways:

• As a named color, like aliceblue or transparent
• As a looked up color, like -fx-base and -fx-color
• Using RGB cubic-coordinates using:
  • hexadecimal format, as well as
  • rgb() and rgba()functions.
• Using HSB cylindrical coordinates using
  • hsb() and  hsba() functions.
• Using a color function such as ladder and derive

Syntax

/* Keyword values */
-fx-background-color: currentcolor;
-fx-background-color: currentcolor;

/*  values */
-fx-background-color: #AAA
-fx-background-color: #AAAAAA
-fx-background-color: #AAAAAAcc

/* RGB and RGBA Format */
-fx-background-color: rgb(170, 170, 170);
-fx-background-color: rgba(170, 170, 170, 204);

/* HSB Format */
-fx-background-color: hsb(4, 100, 40);
-fx-background-color: hsba(4, 100, 40, 204);

/* Ladder format */
-fx-background-color: ladder(-fx-color, #FFF 45%, #000  46%);

/*  This selects between #FFF and #000 depending based on -fx-color */
/* If the brightness of -fx-color is <45%, #FFF is chosen, else it's #000 */

/* Derive  */
-fx-background-color: derive(#333, 10%);
-fx-background-color: derive(#333, -10%);

/* This function brightens and darkens colours based on value provided. */

Color data types available:

Named Colors

There are 148 named colors that can be interpreted by the JavaFX CSS interpreter. They are as follows:

Values

The JavaFX CSS interpreter isn't a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

<color> can have the following values:

Example:

CSS:

.label{
    -fx-background-color: #fcc200;
}

.content{
    -fx-background-color: springgreen;
}

FXML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane prefHeight="250.0" prefWidth="300.0" xmlns="http://javafx.com/javafx/10.0.2-internal">
    <Label alignment="CENTER" 
           text="Title Text" 
           AnchorPane.leftAnchor="10" 
           AnchorPane.rightAnchor="10" 
           AnchorPane.topAnchor="10.0">
      <font>
         <Font name="System Bold" size="12.0" />
      </font>
    </Label>
   <AnchorPane styleClass="content" 
               AnchorPane.bottomAnchor="10.0" 
               AnchorPane.leftAnchor="10.0" 
               AnchorPane.rightAnchor="10.0" 
               AnchorPane.topAnchor="36.0" />
</AnchorPane>

See also:

• -fx-background-color
• <paint>