Playground
Play with your Settings directly on Frontend
Tweaking your theme options from the backend is the usual way to go! But sometimes, you might wish to see the results on the frontend before applying those changes to your whole website, or maybe you'd simply love to explore different settings and find that perfect mix. That's why we've created a frontend playground for you, packed with tons of features!
Test your Variables on Frontend
The frontend playground lets you have fun with your theme variables without impacting your entire site. It's an excellent method to experiment with various color schemes, achieve consistent typography and spacing, all while keeping your settings safe and sound!
Overview of your Imported Classes
At the playground, you can easily see all the classes you've imported, count their usage on any page, and smoothly browse through all the elements that utilize them.
Hex Color Converter
Looking to convert a HEX color to RGB or HSL? Numerous online tools can help you out. Though, why step away from creating your masterpiece and lose precious time when you can obtain these values right on your website?
Scale & Gradient Generator
Within the frontend Playground, you'll find a handy scale generator! Simply pick at least two distinct colors, and the script will generate all the intermediate shades nestled between them.
Color Palette Generator
The frontend Playground is full of handy tools designed to assist you in crafting the ideal color scheme for your project. One such tool is the color palette generator - just pick a base color, and the script will whip up an awesome palette just for you.
Popular Palettes
The popular palette helper offers you the chance to explore well-loved color pairings that you can easily copy and paste into your personal color palette.
Color Lab
The Color Lab helper lets you have fun working with a particular color: tweak the brightness and saturation levels to achieve the precise shade you desire. Additionally, you can easily modify the luminance percentage based on certain accessibility needs.
Light and Dark Color Theme
The frontend playground offers a light/dark theme color choice. Depending on your site's overall vibe, picking the right theme could make your life easier!