JavaFX技巧7：使用CSS颜色常量/派生颜色

在使用FlexCalendarFX时，我不得不定义一组颜色以可视化不同颜色的不同日历的控件。 每个日历不仅提供一种颜色，还提供几种：用于取消选择/选定/悬停状态的背景和文本颜色。

颜色曾在多个地方使用过，但为了简洁起见，我仅关注FlexCalendarFX的日视图中的可视日历条目。 下面的两个屏幕截图显示了相同的条目，首先取消选择，然后选择。

需要注意的重要一点是，它们并不是完全不同的颜色，但是它们都具有相同的基本颜色（绿色），但具有不同的饱和度。

下面的代码显示了我可以找到的在JavaFX CSS中定义相关颜色的最佳方法。 我在“ .root”下全局定义基色，并使用此常量派生所有其他颜色。

.root {
   -style1-color: rgb(119, 192, 75, .9);
}

.style1-entry {
   -fx-background-color: derive(-style1-color, 50%);
}

.style1-entry:selected {
   -fx-background-color: -style1-color;
}

.style1-entry-time-label, .style1-entry-title-label {
   -fx-text-fill: derive(-style1-color, -50%);
}

请注意，如我以前有关透明色的博客中所述，基础色使用的是透明色 。 此CSS片段中的其他背景颜色均源自基色。 它们要么更亮（派生函数中的正百分比值），要么更暗（负百分比值）。

通过使用这种方法定义颜色，您可以为您的应用程序获得一致且平滑的外观，并且看起来不会像孩子的图画书。

翻译自: https://www.javacodegeeks.com/2014/07/javafx-tip-7-use-css-color-constants-derive-colors.html