Super.so calculates colors using HSL variables. Therefore, if you set a specific HEX color, Super ignores the default lightness and overrides it with its own styling. That’s why colors on Super always appear lighter.
How to set exact colors
However, if you’d like to use exact color shades, you can simply add this snippet of code (see below) in the CSS tab under Custom code.
With this code, you can set that Super uses the same lightness as the base color, so you get the exact color without any brightening.
Code snippet
/* EXACT COLORS */
:root {
/* Blue */
--color-bg-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)) !important;
--color-bg-blue-light: hsl(var(--blue-h), var(--blue-s), var(--blue-l)) !important;
--color-pill-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)) !important;
/* Gray */
--color-bg-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l)) !important;
--color-bg-gray-light: hsl(var(--gray-h), var(--gray-s), var(--gray-l)) !important;
--color-pill-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l)) !important;
/* Brown */
--color-bg-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l)) !important;
--color-bg-brown-light: hsl(var(--brown-h), var(--brown-s), var(--brown-l)) !important;
--color-pill-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l)) !important;
/* Orange */
--color-bg-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l)) !important;
--color-bg-orange-light: hsl(var(--orange-h), var(--orange-s), var(--orange-l)) !important;
--color-pill-orange: hsl(var(--orange-h), var(--orange-s), var(--orange-l)) !important;
/* Yellow */
--color-bg-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l)) !important;
--color-bg-yellow-light: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l)) !important;
--color-pill-yellow: hsl(var(--yellow-h), var(--yellow-s), var(--yellow-l)) !important;
/* Green */
--color-bg-green: hsl(var(--green-h), var(--green-s), var(--green-l)) !important;
--color-bg-green-light: hsl(var(--green-h), var(--green-s), var(--green-l)) !important;
--color-pill-green: hsl(var(--green-h), var(--green-s), var(--green-l)) !important;
/* Purple */
--color-bg-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l)) !important;
--color-bg-purple-light: hsl(var(--purple-h), var(--purple-s), var(--purple-l)) !important;
--color-pill-purple: hsl(var(--purple-h), var(--purple-s), var(--purple-l)) !important;
/* Pink */
--color-bg-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)) !important;
--color-bg-pink-light: hsl(var(--pink-h), var(--pink-s), var(--pink-l)) !important;
--color-pill-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)) !important;
/* Red */
--color-bg-red: hsl(var(--red-h), var(--red-s), var(--red-l)) !important;
--color-bg-red-light: hsl(var(--red-h), var(--red-s), var(--red-l)) !important;
--color-pill-red: hsl(var(--red-h), var(--red-s), var(--red-l)) !important;
}