Colors in Java – JavaFX Color Example

This is an article to see Colors in Java through a JavaFX Color Example. In JavaFX, you can specify the color for text and background color for regions. You can specify a color as a uniform color, an image pattern, or a color gradient.

A uniform color uses the same color to fill the entire region. An image pattern lets you fill a region with an image pattern. A color gradient defines a color pattern in which the color varies along a straight line from one color to another. The variation in color in the java gradient can be linear or radial.

 
The following table shows an overview of the whole article:

The following examples uses Java SE 7 and JavaFX 2.2.

1. Using the Color Class in Java

1.1 The Code

FxColorExample1.java

The Color class in java represents a solid uniform color from the RGB color space. Every color has an alpha value defined between 0.0 to 1.0 or 0 to 255. An alpha value of 0.0 or 0 means the color is completely transparent, and an alpha value of 1.0 or 255 denotes a completely opaque color. By default, the alpha value is set to 1.0.

You can have an instance of the Color class in three ways:

• Using the constructor
• Using one of the factory methods
• Using one of the color constants declared in the Color class

The Color class has only one constructor that lets you specify the RGB and opacity in the range of 1,0 and 1.0:

The following snippet of code creates a completely opaque blue color:

You can use the following static methods in the Color class to create Color objects. The double values need to be between 0.0 and 1.0 and int values between 0 and 255:

• Color color(double red, double green, double blue)
• Color color(double red, double green, double blue, double opacity)
• Color hsb(double hue, double saturation, double brightness)
• Color hsb(double hue, double saturation, double brightness, double opacity)
• Color rgb(int red, int green, int blue)
• Color rgb(int red, int green, int blue, double opacity)

The valueOf() and web() factory methods let you create java color objects from strings in web color value formats. The following snippet of code creates blue Color objects using different string formats:

1.2 The GUI

2. Using the ImagePattern Class

2.1 The Code

FxColorExample2.java

An image pattern lets you fill a shape with an image. The image may fill the entire shape or use a tiling pattern. Here are the steps you would use to get an image pattern:

• 1. Create an Image object using an image from a file.
• 2. Define a rectangle, known as the anchor rectangle, relative to the upper left corner of the shape to be filled.

The image is shown in the anchor rectangle and is then resized to fit the anchor rectangle. If the bounding box for the shape to be filled is bigger than that of the anchor rectangle, the anchor rectangle with the image is repeated within the shape in a tiling pattern.

You can create an object of the ImagePattern using one of its constructors:

• ImagePattern(Image image)
• ImagePattern(Image image, double x, double y, double width, double height, boolean proportional)

The first constructor fills the entire bounding box with the image without any pattern.

The second constructor lets you specify the x and y coordinates, width, and height of the anchor rectangle. If the proportional argument is true, the anchor rectangle is specified relative to the bounding box of the shape to be filled in terms of a unit square. If the proportional argument is false, the anchor rectangle is specified in the local coordinate system of the shape.

The following two calls to the two constructors would produce the same result:

2.2 The GUI

The following GUI shows the result of the usage of an image pattern:

3. Using the LinearGradient Class

3.1 The Code

FxColorExample3.java

A linear color gradient is defined using an axis known as a gradient line. Each point on the gradient line is of a different color in java. All points on a line that is perpendicular to the gradient line have the same color in java , which is the color of the point of intersection between the two lines.

The gradient line is defined by a starting point and an ending point. Colors in Java along the gradient line are defined at some points on the gradient line, which are known as stop-color points (or stop points). In java, colors between two stop points are computed using interpolation.

The gradient line has a direction, which is from the starting point to the ending point. All points on a line perpendicular to the gradient line that pass through a stop point will have the color of the stop point.

For example, suppose you have defined a stop point P1 with a color C1. If you draw a line perpendicular to the gradient line passing through the point P1, all points on that line will have the color C1.

In JavaFX, an instance of the LinearGradient class represents a linear color gradient. The class has the following two constructors. The types of their last arguments are different:

• LinearGradient(double startX, double startY, double endX, double endY, boolean proportional, CycleMethod cycleMethod, List stops)
• LinearGradient(double startX, double startY, double endX, double endY, boolean proportional, CycleMethod cycleMethod, Stop… stops)

The startX and startY arguments define the x and y coordinates of the starting point of the gradient line.

The endX and endY arguments define the x and y coordinates of the starting point of the gradient line.

The proportional argument affects the way the coordinates of the starting and ending points are treated.

If it is true, the starting and ending points are treated relative to a unit square. Otherwise, they are treated as absolute value in the local coordinate system. The use of this argument needs a little more explanation.

Typically, a color gradient in java is used to fill a region, for example, a rectangle. Sometimes, you know the size of the region and sometimes you will not. The value of this argument lets you specify the gradient line in relative or absolute form.

In relative form, the region is treated as a unit square. That is, the coordinates of the upper left and the lower right corners are (0.0, 0.0) and (1.0, 1.0), respectively.

Other points in the regions will have x and y coordinates between 0.0 and 1.0. Suppose you specify the starting point as (0.0, 0.0) and the ending point as (1.0, 0.0). It defines a horizontal gradient line from the left to right. The starting and ending points of (0.0, 0.0) and (0.0, 1.0) define a vertical gradient line from top to bottom. The starting and ending points of (0.0, 0.0) and (0.5, 0.0) define a horizontal gradient line from left to middle of the region.

When the proportional argument is false, the coordinate values for the starting and ending points are treated as absolute values with respect to the local coordinate system.

Suppose you have a rectangle of width 200 and height 100. The starting and ending points of (0.0, 0.0) and (200.0, 0.0) define a horizontal gradient line from left to right. The starting and ending points of (0.0, 0.0) and (200.0, 100.0) define a diagonal gradient line from the top left corner to the bottom right corner.

The cycleMethod argument defines how the regions outside the color gradient bounds, defined by the starting and ending points, should be filled. Suppose you define the starting and ending points with the proportional argument set to true as (0.0, 0.0) and (0.5, 0.0), respectively.

This covers only the left half of the region. How should the right half of the region be filled? You specify this behavior using the cycleMethod argument. Its value is one of the enum constants defined in the CycleMethod enum:

• CycleMethod.NO_CYCLE
• CycleMethod.REFLECT
• CycleMethod.REPEAT

The cycle method of CycleMethod.NO_CYCLE fills the remaining region with the terminal color. If you have defined color a stop point only from the left to the middle of a region, the right half will be filled with the color that is defined for the middle of the region.

Suppose you define a color gradient for only the middle half of a region, leaving the 25% at the left side and 25% at the right side undefined. The CycleMethod.NO_CYCLE method will fill the left 25% region with the color that is defined at the 25% distance from left and the right 25% region with the color defined at the 25% distance from right.

The color for the middle 50% will be determined by the color-stop points. The cycle method of CycleMethod.REFLECT fills the remaining regions by reflecting the color gradient, as start-to-end and end-to-start, from the nearest filled region. The cycle method of CycleMethod.REPEAT repeats the color gradient to fill the remaining region.

The stops argument defines the color-stop points along the gradient line. A color-stop point is represented by an instance of the Stop class, which has only one constructor:

The offset value is between 0.0 and 1.0. It defines the relative distance of the stop point along the gradient line from the starting point.

For example, an offset of 0.0 is the starting point, an offset of 1.0 is the ending point, an offset of 0.5 is in the middle of the starting and ending points, and so forth.

You define at least two stop points with two different colors to have a color gradient in Java. There are no limits on the number of stop points you can define for a color gradient.

That covers the explanation for the arguments of the LinearGradient constructors.

The following snippet of code fills a Rectangle with a linear color gradient:

You have two color-stop points. The stop point in the beginning is colored white and that of the end is colored black. The starting point (0, 0) and ending point (1, 0) define a horizontal gradient from left to right.

The proportional argument is set to true, which means the coordinate values are interpreted as relative to a unit square.

The cycle method argument, which is set to CycleMethod.NO_CYCLE, has no effect in this case as your gradient bounds cover the entire region. In the above code, if you want to set the proportional argument value to false, to have the same effect, you would create the LinearGradient object as follows.

Note the use of 200 as the x coordinate for the ending point to denote the end of the rectangle width:

In the following code, you have made a slight change. You defined a horizontal gradient line, which starts at the left side of the rectangle and ends in the middle. Note the use of (0.5, 0) as the coordinates for the ending point.

This leaves the right half of the rectangle with no color gradient. The cycle method is effective in this case as its job is to fill the unfilled regions. The color at the middle of the rectangle is black, which is defined by the second stop point. The CycleMethod.NO_CYCLE value uses the terminal black color to fill the right half of the rectangle.

Let’s look at a slight variant of the previous example. You change the cycle method from CycleMethod.NO_CYCLE to CycleMethod.REFLECT. Note that the right half region (the region with undefined gradient) is the reflection of the left half:

Let’s make a slight change in the previous example so the ending point coordinate covers only one-tenth of the width of the rectangle. The right 90% of the rectangle is filled using the CycleMethod.REFLECT cycle method by alternating end-to-start and start-to-end
color patterns:

Now let’s look at the effect of using the CycleMethod.REPEAT cycle method. The following snippet of code uses an ending point at the middle of the width of the rectangle and a cycle method of CycleMethod.REPEAT.

You could also define more than two stop points, as shown in the following snippet of code. It divides the distance between the starting and the ending points on the gradient line into four segments, each by 25% of the width. The first segment (from left in the above java program) will have colors between red and green, the second between green and blue, the third between blue and orange, and the fourth between orange and yellow.

The following snippet of code defines a gradient line between (0, 0) and (0.1, 0.1) points. It uses the CycleMethod.REPEAT cycle method to fill the rest of the region.

3.2 The GUI

The following GUI shows the result of the above examples:

4. Defining Linear Color Gradients Using a String Format

4.1 The Code

FxColorExample4.java

You can also specify a linear color gradient in string format using the static method valueOf(String colorString) of the LinearGradient class. Typically, the string format is used to specify a linear color gradient in a CSS file. It has the following syntax:

The arguments within square brackets ([ and ]) are optional. If you do not specify an optional argument, the comma that follows also needs to be excluded. The default value for the gradient-line argument is “to bottom”. The default value for the cycle-method argument is CycleMethod.NO_CYCLE. You can specify the gradient line in two ways:

• Using two points—the starting point and the ending point
• Using a side or s corner

The syntax for using two points for the gradient line is:

The coordinates of the points may be specified in percentage of the area or in actual measurement in pixels. For a 200px wide by 100px tall rectangle, a horizontal gradient line may be specified in the following two ways:

or

The syntax for using a side or a corner is:

The side-or-corner value may be top, left, bottom, right, top left, bottom left, bottom right or top right.

Want to master JavaFX ?

Subscribe to our newsletter and download the JavaFX Programming Cookbook right now!

In order to get you prepared for your JavaFX development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

Thank you!

We will contact you soon.

When you define the gradient line using a side or a corner, you specify only the ending point. The starting point is inferred. For example, the value “to top” infers the starting point as “from bottom”. The value “to bottom right” infers the starting point as “from top left,” and so forth. If the gradient-line value is missing, it defaults to “to bottom”.

The valid values for the cycle-method are repeat and reflect. If it is missing, it defaults to CycleMethod.NO_CYCLE.

The color-stops-list argument is a list of color stops. A color stop consists of a web color name and, optionally, a position in pixels or percentage from the starting point.

Examples of lists of color stops are:

• white, black
• white 0%, black 100%
• white 0%, yellow 50%, blue 100%
• white 0px, yellow 100px, red 200px

When you do not specify positions for the first and the last color stops, the positions for the first one defaults to 0% and the second one to 100%. So, the color stop lists “white, black” and “white 0%, black 100%” are fundamentally the same.

If you do not specify positions for any of the color stops in the list, they are assigned positions in such a way that they are evenly placed between the starting point and the ending point.

The following two lists of color stops are the same:

• white, yellow, black, red, green
• white 0%, yellow 25%, black 50%, red 75%, green 100%

You can specify positions for some color stops in a list and not for others. In this case, the color stops without positions are evenly spaced between the preceding and following color stops with positions. The following two lists of color stops are the same:

• white, yellow, black 60%, red, green
• white 0%, yellow 30%, black 50%, red 80%, green 100%

If a color stop in a list has its position set less than the position specified for any previous color stops, its position is set equal to the maximum position set for the previous color stops. The following list of color stops sets 10% for the third color stop, which is less than the position of the second color stop (50%):

This will be changed at runtime to use 50% for the third color stop as follows:

The following snippet of code will create a rectangle. It defines a horizontal color gradient with the ending point midway through the width of the rectangle. It uses repeat as the cycle method:

4.2 The GUI

The following image shows the result of the above code:

5. Using the RadialGradient Class

5.1 The Code

FxColorExample5.java

In a radial color gradient, colors start at a single point, transitioning smoothly outward in a circular or elliptical shape. The shape, let’s say a circle, is defined by a center point and a radius.

The starting point of colors is known as the focus point of the gradient. The colors change along a line, starting at the focus point of the gradient, in all directions until the periphery of the shape is reached.

A radial color gradient is defined using three components:

• A gradient shape (the center and radius of the of the gradient circle)
• A focus point that has the first color of the gradient
• Color stops

The list of color stops determines the value of the color at a point inside the gradient shape. The focus point defines the 0% position of the color stops. The points on the periphery of the circle define the 100% position for the color stops. The color at the point will be interpolated using the nearest color stops on each side of the point on the line.

An instance of the RadialGradient class represents a radial color gradient. The class contains the following two constructors that differ in the types of their last argument:

• RadialGradient(double focusAngle, double focusDistance, double centerX, double centerY, double radius, boolean proportional, CycleMethod cycleMethod, List stops)
• RadialGradient(double focusAngle, double focusDistance, double centerX, double centerY, double radius, boolean proportional, CycleMethod cycleMethod, Stop… stops)

The focusAngle argument defines the focus angle for the focus point. A positive focus angle is measured clockwise from the horizontal line passing through the center point and the line connecting the center point and the focus point. A negative value is measured counterclockwise.

The focusDistance argument is specified in terms of the percentage of the radius of the circle. The value is clamped between -1 and 1. That is, the focus point is always inside the gradient circle. If the focus distance sets the focus point outside the periphery of the gradient circle, the focus point that is used is the point of intersection of the periphery of the circle and the line connecting the center point and the set focus point.

The focusangle and the focusdistance can have positive and negative values.

The centerX and centerY arguments define the x and y coordinates of the center point, respectively, and the radius argument is the radius of the gradient circle. These arguments can be specified relative to a unit square (between 0.0 and 1.0) or in pixels.

The proportional argument affects the way the values for the coordinates of the center point and radius are treated. If it is true, they are treated relative to a unit square. Otherwise, they are treated as absolute values in the local coordinate system.

The cycleMethod and stops arguments have the same meaning as described earlier in the section on using the LinearGradient class. In a radial color gradient, stops are defined along lines connecting the focus point and points on the periphery of the gradient circle. The focus point defines the 0% stop point and the points on the circle periphery define 100% stop points.

The following snippet of code produces a radial color gradient for a Circle:

The zero value for the focus angle and focus distance locates the focus point at the center of the gradient circle. A true proportional argument interprets the center point coordinates (0.5, 0.5) as (25px, 25px) for the 50 by 50 rectangular bounds of the circle. The radius value of 0.5 is interpreted as 25px, and that places the center of the gradient circle at the same location as the center of the circle to fill. The cycle method of CycleMethod.NO_CYCLE has no effect in this case as the gradient circle fills the entire circular area. The color stop at the focus point is white and at the periphery of the gradient circle it is black.

The following snippet of code specifies the radius of the gradient circle as 0.2 of the circle to be filled. This means that it will use a gradient circle of 10px (0.2 multiplied by 50px, which is the radius of the circle to be filled). The region of the circle beyond the 0.2 of its radius has been filled with the color black, as the cycle method was specified as CycleMethod.NO_CYCLE:

Now let’s use the cycle method of CycleMethod.REPEAT in the above snippet of code.

So now let’s use a different center point and focus point. Use a 60-degree focus angle and 0.2 times the radius as the focus distance as in the following code. Notice the 3D effect you get by moving the focus point away from the center point.

Now let’s fill a rectangular region (nonsquare) with a radial color gradient. Notice the elliptical gradient shape used by JavaFX. You have specified the radius of the gradient as 0.5 and the proportional argument as true. Since your rectangle is 200px wide and 100px tall, it results in two radii. One along the x-axis and one along the y-axis, giving rise to an ellipse. The radii along the x and y axes are 100px and 50px, respectively.

If you want a rectangle to be filled with a color gradient of a circular shape rather than elliptical shape, you should specify the proportional argument as false and the radius value will be treated in pixels. The following snippet of code produces a rectangle:

Finally, let’s look at an example of using multiple color stops with the focus point on the periphery of the circle. The code to produce the effect is as follows:

5.2 The GUI

The following GUI shows the result of the discussed colors examples in Java:

6. Defining Radial Color Gradients in String Format

6.1 The Code

FxColorExample6.java

You can also specify a radial color gradient in string format by using the static method valueOf(String colorString) of the RadialGradient class. Typically, the string format is used to specify a radial color gradient in a CSS file. It has the following syntax:

The arguments within square brackets are optional. If you do not specify an optional argument, the comma that follows needs to be excluded as well.

The default value for focus-angle and focus-distance is 0. You can specify the focus angle in degrees, radians, gradians, and turns. The focus distance is specified as a percentage of the radius. Examples are as follows:

• focus-angle 45.0deg
• focus-angle 0.5rad
• focus-angle 30.0grad
• focus-angle 0.125turn
• focus-distance 50%

The center and radius arguments at colors in java are specified in a percentage relative to the region being filled or in absolute pixels. You cannot specify one argument in a percentage and the other in pixels. Both must be specified in the same unit. The default value for the center is (0, 0) in the unit. Examples are as follows:

• center 50px 50px, radius 50px
• center 50% 50%, radius 50%

The valid values for the cycle-method argument are repeat and reflect. If this is not specified, it defaults to CycleMethod.NO_CYCLE.

A list of colors in java stops is specified using colors and their positions. Positions are specified as a percentage of distance on a line from the focus point to the periphery of the shape of the gradient. Please refer to the earlier discussion on specifying the color stops in a linear color gradient for more details.

Examples are as follows:

• white, black
• white 0%, black 100%
• red, green, blue
• red 0%, green 80%, blue 100%

The following snippet of code will produce a circle:

6.2 The GUI

The image shows the result of the previous code:

7. Download Java Source Code

This was an example of Colors in Java using the javafx.scene.paint

Last updated on May 14th, 2020

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

I agree to the Terms and Privacy Policy

Sign up

Thank you!

We will contact you soon.