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片段中的其他背景颜色均源自基色。它们要么更亮（派生函数中的正百分比值），要么更暗（负百分比值）。

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