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
ortransparent
- As a looked up color, like
-fx-base
and-fx-color
- Using RGB cubic-coordinates using:
- hexadecimal format, as well as
rgb()
andrgba()
functions.
- Using HSB cylindrical coordinates using
hsb()
andhsba()
functions.
- Using a color function such as
ladder
andderive
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:
- The addition of
color
functionsladder
andderive
, which are not present in the web CSS color model - The use of
HSB
color notation. This is the same as theHSL
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:
Value | Description |
---|---|
Named colors | There are 148 named colors available to the JavaFX CSS Interpreter |
Looked up colors | JavaFX uses looked-up colors to define much of its appearance. They are most usually defined in the root element of a scene. |
RGB colors | RGB colors can be defined with or without an alpha value to define opacity |
HSB colors | HSB 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:

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>