CSS Color Theme Generatorv1.1.2 open source • light/dark scheme • normal/high contrast Based on Numl.Design theme generator by @tenphi and HSLuv color space by @boronineOptionsComing soon...Single toneDuo toneHue: insert Accent Hue: insert Saturation: Use pastel palette: Type:MainTintToneSwapSpecialContrast:SoftNormalStrongEmphasizing:DimNormalBold Only for Tone and Swap types. Output Built by Andrey Yamanov Stack: Numl.Design, Vite v2, Vue v3 Source Code PreviewChange schemeChange contrastNuml.Design Paragraph text Special paragraph text Basic Card Clear Card Basic badgeSpecial badgeBasic button statesDefaultHoverPressedToggledFocusedDisabledClear button statesDefaultHoverPressedToggledFocusedDisabledSpecial button statesDefaultHoverPressedToggledFocused DisabledVarious widgets 1 2 3 4 Option 1 Option 2 Option 3 OneTwoThreeMenuitem 1Menuitem 2Menuitem 3 Indicators Loading... Areas Dark area Light area Code converterInsert color: You can insert any valid CSS-color: named, hex, rgb, rgba, hsl, etc. Hue: – Saturation: –Hue and Saturation are calculated in HSLuv color space and can be very different from values of HSL. Submit Cancel