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

Differences to web CSS:

The JavaFX CSS interpreter differs in some specific ways from the W3 color standard. It’s worth bearing these in mind as you design your CSS strategy:

  1. The addition of color functions ladder and derive, which are not present in the web CSS color model
  2. The use of HSB color notation. This is the same as the HSL notation used in web CSS, but under a different name.

Behaviour

A <color> property represents a single color painted across the entire background of an object. The ladder and derive functions take several arguments, but result in a single color.

Properties such as -fx-background-color take a <paint> value. This includes the <color> data type, but also includes:

  • <linear-gradient> and
  • <radial-gradient>.

These produce gradients, rather than single blocks of color.

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:

Keyword Hex Code RGB Values Example
aliceblue #f0f8ff (240, 248, 255)
antiquewhite #faebd7 (250, 235, 215)
aqua #00ffff (0, 255, 255)
aquamarine #7fffd4 (127, 255, 212)
azure #f0ffff (240, 255, 255)
beige #f5f5dc (245, 245, 220)
bisque #ffe4c4 (255, 228, 196)
black #000000 (0, 0, 0)
blanchedalmond #ffebcd (255, 235, 205)
blue #0000ff (0, 0, 255)
blueviolet #8a2be2 (138, 43, 226)
brown #a52a2a (165, 42, 42)
burlywood #deb887 (222, 184, 135)
cadetblue #5f9ea0 (95, 158, 160)
chartreuse #7fff00 (127, 255, 0)
chocolate #d2691e (210, 105, 30)
coral #ff7f50 (255, 127, 80)
cornflowerblue #6495ed (100, 149, 237)
cornsilk #fff8dc (255, 248, 220)
crimson #dc143c (220, 20, 60)
cyan #00ffff (0, 255, 255)
darkblue #00008b (0, 0, 139)
darkcyan #008b8b (0, 139, 139)
darkgoldenrod #b8860b (184, 134, 11)
darkgray #a9a9a9 (169, 169, 169)
darkgreen #006400 (0, 100, 0)
darkgrey #a9a9a9 (169, 169, 169)
darkkhaki #bdb76b (189, 183, 107)
darkmagenta #8b008b (139, 0, 139)
darkolivegreen #556b2f (85, 107, 47)
darkorange #ff8c00 (255, 140, 0)
darkorchid #9932cc (153, 50, 204)
darkred #8b0000 (139, 0, 0)
darksalmon #e9967a (233, 150, 122)
darkseagreen #8fbc8f (143, 188, 143)
darkslateblue #483d8b (72, 61, 139)
darkslategray #2f4f4f (47, 79, 79)
darkslategrey #2f4f4f (47, 79, 79)
darkturquoise #00ced1 (0, 206, 209)
darkviolet #9400d3 (148, 0, 211)
deeppink #ff1493 (255, 20, 147)
deepskyblue #00bfff (0, 191, 255)
dimgray #696969 (105, 105, 105)
dimgrey #696969 (105, 105, 105)
dodgerblue #1e90ff (30, 144, 255)
firebrick #b22222 (178, 34, 34)
floralwhite #fffaf0 (255, 250, 240)
forestgreen #228b22 (34, 139, 34)
fuchsia #ff00ff (255, 0, 255)
gainsboro #dcdcdc (220, 220, 220)
ghostwhite #f8f8ff (248, 248, 255)
gold #ffd700 (255, 215, 0)
goldenrod #daa520 (218, 165, 32)
gray #808080 (128, 128, 128)
green #008000 (0, 128, 0)
greenyellow #adff2f (173, 255, 47)
grey #808080 (128, 128, 128)
honeydew #f0fff0 (240, 255, 240)
hotpink #ff69b4 (255, 105, 180)
indianred #cd5c5c (205, 92, 92)
indigo #4b0082 (75, 0, 130)
ivory #fffff0 (255, 255, 240)
khaki #f0e68c (240, 230, 140)
lavender #e6e6fa (230, 230, 250)
lavenderblush #fff0f5 (255, 240, 245)
lawngreen #7cfc00 (124, 252, 0)
lemonchiffon #fffacd (255, 250, 205)
lightblue #add8e6 (173, 216, 230)
lightcoral #f08080 (240, 128, 128)
lightcyan #e0ffff (224, 255, 255)
lightgoldenrodyellow #fafad2 (250, 250, 210)
lightgray #d3d3d3 (211, 211, 211)
lightgreen #90ee90 (144, 238, 144)
lightgrey #d3d3d3 (211, 211, 211)
lightpink #ffb6c1 (255, 182, 193)
lightsalmon #ffa07a (255, 160, 122)
lightseagreen #20b2aa (32, 178, 170)
lightskyblue #87cefa (135, 206, 250)
lightslategray #778899 (119, 136, 153)
lightslategrey #778899 (119, 136, 153)
lightsteelblue #b0c4de (176, 196, 222)
lightyellow #ffffe0 (255, 255, 224)
lime #00ff00 (0, 255, 0)
limegreen #32cd32 (50, 205, 50)
linen #faf0e6 (250, 240, 230)
magenta #ff00ff (255, 0, 255)
maroon #800000 (128, 0, 0)
mediumaquamarine #66cdaa (102, 205, 170)
mediumblue #0000cd (0, 0, 205)
mediumorchid #ba55d3 (186, 85, 211)
mediumpurple #9370db (147, 112, 219)
mediumseagreen #3cb371 (60, 179, 113)
mediumslateblue #7b68ee (123, 104, 238)
mediumspringgreen #00fa9a (0, 250, 154)
mediumturquoise #48d1cc (72, 209, 204)
mediumvioletred #c71585 (199, 21, 133)
midnightblue #191970 (25, 25, 112)
mintcream #f5fffa (245, 255, 250)
mistyrose #ffe4e1 (255, 228, 225)
moccasin #ffe4b5 (255, 228, 181)
navajowhite #ffdead (255, 222, 173)
navy #000080 (0, 0, 128)
oldlace #fdf5e6 (253, 245, 230)
olive #808000 (128, 128, 0)
olivedrab #6b8e23 (107, 142, 35)
orange #ffa500 (255, 165, 0)
orangered #ff4500 (255, 69, 0)
orchid #da70d6 (218, 112, 214)
palegoldenrod #eee8aa (238, 232, 170)
palegreen #98fb98 (152, 251, 152)
paleturquoise #afeeee (175, 238, 238)
palevioletred #db7093 (219, 112, 147)
papayawhip #ffefd5 (255, 239, 213)
peachpuff #ffdab9 (255, 218, 185)
peru #cd853f (205, 133, 63)
pink #ffc0cb (255, 192, 203)
plum #dda0dd (221, 160, 221)
powderblue #b0e0e6 (176, 224, 230)
purple #800080 (128, 0, 128)
red #ff0000 (255, 0, 0)
rosybrown #bc8f8f (188, 143, 143)
royalblue #4169e1 (65, 105, 225)
saddlebrown #8b4513 (139, 69, 19)
salmon #fa8072 (250, 128, 114)
sandybrown #f4a460 (244, 164, 96)
seagreen #2e8b57 (46, 139, 87)
seashell #fff5ee (255, 245, 238)
sienna #a0522d (160, 82, 45)
silver #c0c0c0 (192, 192, 192)
skyblue #87ceeb (135, 206, 235)
slateblue #6a5acd (106, 90, 205)
slategray #708090 (112, 128, 144)
slategrey #708090 (112, 128, 144)
snow #fffafa (255, 250, 250)
springgreen #00ff7f (0, 255, 127)
steelblue #4682b4 (70, 130, 180)
tan #d2b48c (210, 180, 140)
teal #008080 (0, 128, 128)
thistle #d8bfd8 (216, 191, 216)
tomato #ff6347 (255, 99, 71)
turquoise #40e0d0 (64, 224, 208)
violet #ee82ee (238, 130, 238)
wheat #f5deb3 (245, 222, 179)
white #ffffff (255, 255, 255)
whitesmoke #f5f5f5 (245, 245, 245)
yellow #ffff00 (255, 255, 0)
yellowgreen #9acd32 (154, 205, 50)
transparent rgba(0,0,0,0) (0, 0, 0)

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:

ValueDescription
Named colorsThere are 148 named colors available to the JavaFX CSS Interpreter
Looked up colorsJavaFX uses looked-up colors to define much of its appearance. They are most usually defined in the root element of a scene.
RGB colorsRGB colors can be defined with or without an alpha value to define opacity
HSB colorsHSB colors can be defined with or without an alpha value to define opacity
Ladder-selected colors (color function)Ladder functions produce a single color as a result of a brightness-based calculation
Derived colors (color function)The Derive function lightens or darkens colors based on the value provided. A positive value will lighten. A negative value will darken. Values should be provided as a percentage.

Example:

The JavaFX CSS data type can be defined in multiple ways

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: