From: Michael Tremer Date: Thu, 4 Dec 2025 16:44:34 +0000 (+0000) Subject: colors: Generate a proper color palette X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d12a7454d012bde2177c0b15bbb0fea08d77c01f;p=telemetry.git 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 --- diff --git a/src/daemon/colors.h b/src/daemon/colors.h index 4f372af..b460a8e 100644 --- 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 a607ec0..b5c255e 100644 --- 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 6506667..5ed12b1 100644 --- 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 66a9f7e..1d52679 100644 --- 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 d5cce4f..ea32b0e 100644 --- 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 300e95d..91b1de7 100644 --- 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 eda18b3..adc599a 100644 --- 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"));