colors: Generate a proper color palette

This patch also assigns a lot of the colors to specific use cases that
we will have a consistent language throughout all graphs. We want to
ensure that signal colors are only used for this use-case for instance.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/daemon/colors.h b/src/daemon/colors.h
index 4f372afd2066933c095d96130f200c1ced006032..b460a8ed4355914a8ebb40101b44c47c0d49d6f2 100644 (file)
--- a/src/daemon/colors.h
+++ b/src/daemon/colors.h
@@ -23,27 +23,32 @@
 
 #include "util.h"
 
+#define COLOR_PRIMARY                  "#ff2e52"
 #define COLOR_BLACK                            "#000000"
 #define COLOR_WHITE                            "#ffffff"
-#define COLOR_GREY                             "#9e9e9e"
-#define COLOR_RED                              "#f44336"
-#define COLOR_LIGHT_RED                        "#cc0033"
-#define COLOR_YELLOW                   "#ffeb3b"
-#define COLOR_LIGHT_YELLOW             "#ffff66"
-#define COLOR_ORANGE                   "#ff9800"
-#define COLOR_GREEN                            "#4caf50"
-#define COLOR_LIGHT_GREEN              "#8bc34a"
-#define COLOR_BLUE                             "#2196f3"
-#define COLOR_LIGHT_BLUE               "#03a9f4"
-#define COLOR_PINK                             "#e91e63"
-#define COLOR_DEEP_PURPLE              "#673ab7"
+
+#define COLOR_WARM_ORANGE              "#ff6b2e"
+#define COLOR_CLEAN_AMBER              "#ffae2e"
+#define COLOR_YELLOW_GOLD              "#ffd52e"
+#define COLOR_FRESH_LIME               "#9bd62e"
+#define COLOR_CLEAN_GREEN              "#3cc24a"
+#define COLOR_AQUA_GREEN               "#2ec28f"
+#define COLOR_COOL_CYAN                        "#2eb9d6"
+#define COLOR_STRONG_BLUE              "#2e89ff"
+#define COLOR_VIOLET_BLUE              "#495cff"
+#define COLOR_VIVID_VIOLET             "#7a3cff"
+#define COLOR_PURPLE_MAGENTA   "#c02eff"
+#define COLOR_PINK_MAGENTA             "#ff2ee2"
+#define COLOR_SOFT_RED                 "#ff827e"
+#define COLOR_COOL_GREY                        "#aab4c4"
+#define COLOR_DARK_GREY                        "#596273"
 
 // Make the background and canvas transparent
 #define COLOR_BACKGROUND               COLOR_TRANSPARENT
 #define COLOR_CANVAS                   COLOR_TRANSPARENT
 
 // Use a dark grey for the font
-#define COLOR_FONT                             "#333333"
+#define COLOR_FONT                             COLOR_DARK_GREY
 
 // Use a light grey for the axis, frame and grid
 #define COLOR_AXIS                             "#aaaaaa"
@@ -58,28 +63,38 @@
 #define COLOR_TRANSPARENT              COLOR_WITH_ALPHA(COLOR_WHITE, COLOR_OPACITY_100P)
 
 // Default - If something does not need to have a special meaning
-#define COLOR_DEFAULT                  COLOR_BLACK
+#define COLOR_DEFAULT                  COLOR_COOL_GREY
+#define COLOR_ERROR                            COLOR_PURPLE_MAGENTA
+#define COLOR_ALERT                            COLOR_SOFT_RED
 
 // Limits - When there is a floor/ceiling to resource usage
-#define COLOR_MINIMUM                  COLOR_GREEN
-#define COLOR_MAXIMUM                  COLOR_RED
+#define COLOR_MINIMUM                  COLOR_FRESH_LIME
+#define COLOR_MAXIMUM                  COLOR_SOFT_RED
 #define COLOR_LIMIT                            COLOR_MAXIMUM
 
+// Signal
+#define COLOR_SIGNAL_STRONG            COLOR_CLEAN_GREEN
+#define COLOR_SIGNAL_GOOD              COLOR_FRESH_LIME
+#define COLOR_SIGNAL_FAIR              COLOR_YELLOW_GOLD
+#define COLOR_SIGNAL_WEAK              COLOR_CLEAN_AMBER
+#define COLOR_SIGNAL_VERY_WEAK COLOR_WARM_ORANGE
+#define COLOR_SIGNAL_NO_SIGNAL COLOR_PINK_MAGENTA
+
 // Define colors for incoming/outgoing traffic
-#define COLOR_RX                               "#43a047"
-#define COLOR_TX                               "#fb8c00"
+#define COLOR_RX                               COLOR_COOL_CYAN
+#define COLOR_TX                               COLOR_WARM_ORANGE
 
 // I/O
-#define COLOR_READ                             COLOR_GREEN
-#define COLOR_WRITE                            COLOR_ORANGE
+#define COLOR_READ                             COLOR_STRONG_BLUE
+#define COLOR_WRITE                            COLOR_YELLOW_GOLD
 
 // Caches
-#define COLOR_CACHE_HIT                        COLOR_GREEN
-#define COLOR_CACHE_MISS               COLOR_RED
-#define COLOR_CACHE_PREFETCH   COLOR_BLACK
+#define COLOR_CACHE_HIT                        COLOR_CLEAN_GREEN
+#define COLOR_CACHE_MISS               COLOR_CLEAN_AMBER
+#define COLOR_CACHE_PREFETCH   COLOR_COOL_GREY
 
 // Latency
-#define COLOR_LATENCY                  COLOR_LIGHT_BLUE
+#define COLOR_LATENCY                  COLOR_VIVID_VIOLET
 #define COLOR_LOSS_0                   COLOR_TRANSPARENT
 #define COLOR_LOSS_5                   COLOR_WITH_ALPHA(COLOR_LIMIT, COLOR_OPACITY_20P)
 #define COLOR_LOSS_10                  COLOR_WITH_ALPHA(COLOR_LIMIT, COLOR_OPACITY_40P)
@@ -87,40 +102,81 @@
 #define COLOR_LOSS_50                  COLOR_WITH_ALPHA(COLOR_LIMIT, COLOR_OPACITY_80P)
 
 // Temperature
-#define COLOR_TEMPERATURE              COLOR_RED
+#define COLOR_TEMPERATURE              COLOR_COOL_GREY
 
 // Networking
-#define COLOR_TCP                              COLOR_GREEN
-#define COLOR_UDP                              COLOR_ORANGE
-#define COLOR_ICMP                             COLOR_RED
-#define COLOR_IP_FRAG                  COLOR_BLACK
-
-// Firewall
-#define COLOR_DROP                             COLOR_RED
+#define COLOR_IPV6                             COLOR_VIVID_VIOLET
+#define COLOR_IPV4                             COLOR_VIOLET_BLUE
+#define COLOR_TCP                              COLOR_STRONG_BLUE
+#define COLOR_UDP                              COLOR_COOL_CYAN
+#define COLOR_ICMP                             COLOR_YELLOW_GOLD
+#define COLOR_IP_FRAG                  COLOR_YELLOW_GOLD
+
+// Firewall, IPS, etc.
+#define COLOR_ACCEPT                   COLOR_CLEAN_GREEN
+#define COLOR_DROP                             COLOR_PINK_MAGENTA
+#define COLOR_NAT                              COLOR_STRONG_BLUE
+#define COLOR_BYPASSED                 COLOR_DARK_GREY
+#define COLOR_OFFLOADED                        COLOR_COOL_CYAN
+#define COLOR_SCANNED                  COLOR_CLEAN_AMBER
+#define COLOR_WHITELISTED              COLOR_CLEAN_GREEN
 
 // DNS
-#define COLOR_DNS_KEYS                 COLOR_RED
-#define COLOR_DNS_INFRA                        COLOR_GREY
-#define COLOR_DNS_RRSETS               COLOR_BLUE
-#define COLOR_DNS_MSGS                 COLOR_GREEN
-#define COLOR_DNS_RPZ                  COLOR_RED
-#define COLOR_DNS_ITERATOR             COLOR_ORANGE
-#define COLOR_DNS_VALIDATOR            COLOR_PINK
+#define COLOR_DNS                              COLOR_STRONG_BLUE
+#define COLOR_DNS_KEYS                 COLOR_VIVID_VIOLET
+#define COLOR_DNS_INFRA                        COLOR_DARK_GREY
+#define COLOR_DNS_RRSETS               COLOR_COOL_CYAN
+#define COLOR_DNS_MSGS                 COLOR_STRONG_BLUE
+#define COLOR_DNS_RPZ                  COLOR_CLEAN_AMBER
+#define COLOR_DNS_ITERATOR             COLOR_CLEAN_GREEN
+#define COLOR_DNS_VALIDATOR            COLOR_PURPLE_MAGENTA
 
 // CPU Colors
-
 static inline const char* COLOR_CPU(long i) {
        const char* cpu_colors[] = {
-               COLOR_RED,
-               COLOR_YELLOW,
-               COLOR_GREEN,
-               COLOR_ORANGE,
+               COLOR_STRONG_BLUE,
+               COLOR_COOL_CYAN,
+               COLOR_CLEAN_GREEN,
+               COLOR_FRESH_LIME,
+               COLOR_CLEAN_AMBER,
+               COLOR_VIVID_VIOLET,
+               COLOR_PURPLE_MAGENTA,
+               COLOR_DARK_GREY,
                NULL,
        };
 
        return (cpu_colors[i % STATIC_ARRAY_SIZE(cpu_colors)]);
 }
 
+#define COLOR_USER                             COLOR_CLEAN_GREEN
+#define COLOR_NICE                             COLOR_FRESH_LIME
+#define COLOR_SYS                              COLOR_STRONG_BLUE
+#define COLOR_WAIT                             COLOR_CLEAN_AMBER
+#define COLOR_IRQ                              COLOR_SOFT_RED
+#define COLOR_SOFTIRQ                  COLOR_PURPLE_MAGENTA
+#define COLOR_STEAL                            COLOR_COOL_CYAN
+#define COLOR_GUEST                            COLOR_VIVID_VIOLET
+#define COLOR_GUEST_NICE               COLOR_VIOLET_BLUE
+#define COLOR_IDLE                             COLOR_COOL_GREY
+
+// Load Average
+#define COLOR_LOAD1                            COLOR_STRONG_BLUE
+#define COLOR_LOAD5                            COLOR_COOL_CYAN
+#define COLOR_LOAD15                   COLOR_FRESH_LIME
+
+// Pressure Stall Information
+#define COLOR_LOAD10                   COLOR_LOAD1
+#define COLOR_LOAD60                   COLOR_LOAD5
+#define COLOR_LOAD300                  COLOR_LOAD15
+
+// Memory
+#define COLOR_MEM_TOTAL                        COLOR_DARK_GREY
+#define COLOR_MEM_USED                 COLOR_CLEAN_GREEN
+#define COLOR_BUFFERS                  COLOR_FRESH_LIME
+#define COLOR_CACHED                   COLOR_COOL_CYAN
+#define COLOR_SWAP_USED                        COLOR_CLEAN_AMBER
+#define COLOR_SWAP_TOTAL               COLOR_COOL_GREY
+
 // Macro to make colours transparent
 #define COLOR_WITH_ALPHA(base, alpha) base alpha
 
@@ -138,6 +194,6 @@ static inline const char* COLOR_CPU(long i) {
 #define COLOR_OPACITY_0P               "00"
 
 // Fill areas very lightly
-#define OPACITY_AREA                   COLOR_OPACITY_15P
+#define OPACITY_AREA                   COLOR_OPACITY_20P
 
 #endif /* TELEMETRY_COLORS_H */

diff --git a/src/daemon/graphs/hostapd-station-signal.c b/src/daemon/graphs/hostapd-station-signal.c
index a607ec098e9bae9724cd8d73f799f1e3583a77d5..b5c255e8c40ff56cf723428cf7b5aca4c4344e08 100644 (file)
--- a/src/daemon/graphs/hostapd-station-signal.c
+++ b/src/daemon/graphs/hostapd-station-signal.c
@@ -59,13 +59,13 @@ static int hostapd_station_signal_render(td_ctx* ctx, td_graph* graph,
        PRINT_HEADER4(args, _("Current"), _("Average"), _("Minimum"), _("Maximum"));
 
        // Draw signal
-       DRAW_LINE_WITH_LABEL(args, 2, "signal", object, COLOR_GREEN, 0, _("Signal"));
+       DRAW_LINE_WITH_LABEL(args, 2, "signal", object, COLOR_SIGNAL_STRONG, 0, _("Signal"));
        PRINT_CAMM(args, "signal", object, FLOAT_WITH_UNIT, _("dBm"));
 
        // Draw the lower signal quality in different colors
-       DRAW_LINE(args, 2, "signal_good", object, COLOR_YELLOW, 0);
-       DRAW_LINE(args, 2, "signal_fair", object, COLOR_ORANGE, 0);
-       DRAW_LINE(args, 2, "signal_poor", object, COLOR_RED, 0);
+       DRAW_LINE(args, 2, "signal_good", object, COLOR_SIGNAL_GOOD, 0);
+       DRAW_LINE(args, 2, "signal_fair", object, COLOR_SIGNAL_FAIR, 0);
+       DRAW_LINE(args, 2, "signal_poor", object, COLOR_SIGNAL_WEAK, 0);
 
        // Draw last ACK signal
        DRAW_LINE_WITH_LABEL(args, 2, "last_ack_signal", object, COLOR_DEFAULT, 0, _("Last ACK Signal"));

diff --git a/src/daemon/graphs/legacy-suricata.c b/src/daemon/graphs/legacy-suricata.c
index 65066674ced8d60aa1c07909e8e7c52f50cf8f4a..5ed12b1f88871e2099d8002815058aa8d92362e8 100644 (file)
--- a/src/daemon/graphs/legacy-suricata.c
+++ b/src/daemon/graphs/legacy-suricata.c
@@ -23,10 +23,6 @@
 #include "graph.h"
 #include "legacy-suricata.h"
 
-#define COLOR_WHITELISTED COLOR_GREEN
-#define COLOR_BYPASSED    COLOR_ORANGE
-#define COLOR_SCANNED     COLOR_RED
-
 static int legacy_suricata_title(td_ctx* ctx, td_graph* graph,
                const char* object, char* title, size_t length) {
        return __td_string_set(title, length, _("Suricata Throughput"));
@@ -77,7 +73,7 @@ static int legacy_suricata_render(td_ctx* ctx, td_graph* graph,
                0, _("Whitelisted"));
        PRINT_CAMM(args, "bps", "WHITELISTED", BPS);
 
-       DRAW_AREA_OUTLINE_WITH_LABEL(args, "bps", "BYPASSED", COLOR_BYPASSED,
+       DRAW_AREA_OUTLINE_WITH_LABEL(args, "bps", "BYPASSED", COLOR_OFFLOADED,
                STACKED, _("Offloaded"));
        PRINT_CAMM(args, "bps", "BYPASSED", BPS);
 

diff --git a/src/daemon/graphs/loadavg.c b/src/daemon/graphs/loadavg.c
index 66a9f7e0887f36c1fd00744dc4e9f795ac7623fc..1d52679f27642c53eec98cf9ea45247afddc62ce 100644 (file)
--- a/src/daemon/graphs/loadavg.c
+++ b/src/daemon/graphs/loadavg.c
@@ -24,11 +24,6 @@
 #include "graph.h"
 #include "loadavg.h"
 
-// Set some colors
-#define COLOR_LOAD15   COLOR_RED
-#define COLOR_LOAD5            COLOR_ORANGE
-#define COLOR_LOAD1            COLOR_YELLOW
-
 static int loadavg_title(td_ctx* ctx, td_graph* graph,
                const char* object, char* title, size_t length) {
        return __td_string_set(title, length, _("Load Average"));

diff --git a/src/daemon/graphs/memory.c b/src/daemon/graphs/memory.c
index d5cce4f718e0635443804d9d1effcc912dd34fe6..ea32b0e63032139d65836a478cced8f404c6d125 100644 (file)
--- a/src/daemon/graphs/memory.c
+++ b/src/daemon/graphs/memory.c
@@ -24,14 +24,6 @@
 #include "graph.h"
 #include "memory.h"
 
-// Set some colors
-#define COLOR_MEM_TOTAL                COLOR_RED
-#define COLOR_MEM_USED         COLOR_BLUE
-#define COLOR_BUFFERS          COLOR_GREEN
-#define COLOR_CACHED           COLOR_GREY
-#define COLOR_SWAP_USED                COLOR_RED
-#define COLOR_SWAP_TOTAL       COLOR_BLACK
-
 static int memory_title(td_ctx* ctx, td_graph* graph,
                const char* object, char* title, size_t length) {
        return __td_string_set(title, length, _("Memory Usage"));

diff --git a/src/daemon/graphs/pressure.c b/src/daemon/graphs/pressure.c
index 300e95d90770364d9868f8b3f516d17e75fa5aa9..91b1de7cd1f703b007f152ea2c27c5fcf42a19de 100644 (file)
--- a/src/daemon/graphs/pressure.c
+++ b/src/daemon/graphs/pressure.c
@@ -24,11 +24,6 @@
 #include "graph.h"
 #include "pressure.h"
 
-// Set some colors
-#define COLOR_LOAD300  COLOR_RED
-#define COLOR_LOAD60   COLOR_ORANGE
-#define COLOR_LOAD10   COLOR_YELLOW
-
 static int pressure_render(td_ctx* ctx, td_graph* graph,
                const td_graph_render_options* options, td_args* args, const char* source) {
        int r;

diff --git a/src/daemon/graphs/processor.c b/src/daemon/graphs/processor.c
index eda18b348e45f60898ee90a42989e1e074f5bfb7..adc599a2a659805a3f75fa1ca1acfebe03c4f81a 100644 (file)
--- a/src/daemon/graphs/processor.c
+++ b/src/daemon/graphs/processor.c
@@ -22,18 +22,6 @@
 #include "graph.h"
 #include "processor.h"
 
-// Set some colors
-#define COLOR_USER                     COLOR_LIGHT_GREEN
-#define COLOR_NICE                     COLOR_BLUE
-#define COLOR_SYS                      COLOR_RED
-#define COLOR_WAIT                     COLOR_DEEP_PURPLE
-#define COLOR_IRQ                      COLOR_ORANGE
-#define COLOR_SOFTIRQ          COLOR_YELLOW
-#define COLOR_STEAL                    COLOR_LIGHT_BLUE
-#define COLOR_GUEST                    COLOR_PINK
-#define COLOR_GUEST_NICE       COLOR_PINK
-#define COLOR_IDLE                     COLOR_LIGHT_GREY
-
 static int processor_title(td_ctx* ctx, td_graph* graph,
                const char* object, char* title, size_t length) {
        return __td_string_set(title, length, _("Processor Usage"));