Ignite the Magic!

Hi, I’m Julibe, and I Craft Digital Experiences!

Whatsapp Facebook Twitter Dribbble Instagram Envelope

Haunt Me!

Contact Me!

Prismatico 🎨 Your colors, your hues!

Prismatico – 001
Equip the ultimate Prisma artifact! Roll for perception with accessibility checks, brew custom gradients in the alchemy lab, and scribe your loot into legendary scrolls. Your quest for the perfect hue ends here.
Prismatico is a gamified, RPG-themed color manipulation engine. It treats color selection as a quest, offering tools for mixing (alchemy), contrast testing (perception checks), and binary file export (scribing scrolls), all wrapped in a lore-rich interface.
julibe #julibe #ColorQuest #WebDevAdventure #DungeonsAndDesign #FrontendMagic #RPGTools #CreativeCoding #LootDrop #IndieDev #ChromaticDragons #DesignArtifact #foryou
👻🎲 ⚔️ 🛡️ 🎨 🧪 📜 🐉 💎 🏰 🧙‍♂️👻
Stop rolling with disadvantage on your design checks. Equip Prismatico and master the arcane arts of color theory today!

ᛒᚱᛁᛋᛘᛅᛏᛁᚴᚬ 🎨 (Prismatico)

v. 3.3.1

Start The Color Quest

Your colors, your hues!

In a nutshell...

The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮

Listen well, adventurer! Prismatico is a high-level artifact for your browser that turns the mundane task of picking colors into an epic quest. It features an Alchemy Mixer for blending gradients, a Legibility Oracle that rolls automatic Perception checks against visual standards, and a Scribe’s Desk for exporting your palette to binary formats or web spells.

It handles the complex math – the arcane arts of the web – so you can focus entirely on the glory of your visual campaign. Build your inventory, roll critical successes on your UI, and bring legendary loot into your projects.

Enter the Chromatic Realm

Hail, traveler! You have wandered long through the Deserts of Greyscale and the Swamps of Default Blue. You seek a tool of power, a legendary artifact capable of bending the very spectrum of light to your will. Behold, Prismatico! This is no mere trinket; it is a Tier-5 Enchantment for your browser, designed to boost your Design stats and grant you Advantage on all Visual Perception checks.

The Alchemist’s Forge

Why rely on the rusted tools of old when you can wield a forge powered by the arcane math of HSL? With Prismatico, you don’t just “pick” colors; you cast them. Whether you are brewing a potion of “Royal Crimson” or forging a shield of “Neon Void,” the integrated Alchemy Mixer allows you to blend essences with precision. And fear not the darkness, the built-in Legibility Oracle constantly rolls against the WCAG Difficulty Class (DC) to ensure your text never fails a readability saving throw.

Scribe Your Legend

A true adventurer does not leave their loot behind. When your inventory is full of rare hues, Prismatico allows you to scribe them into ancient formats. Whether you need a JSON manifest, a CSS enchantment, or a binary ASE scroll to summon your colors in the Adobe Realm, this tool handles the complex transmutation of bytes so you can continue your adventure without encumbrance.

About

Thinking about building something similar?

These estimates will give you a clear picture of the technical scope, development timeline, and investment required to turn the idea into an awesome reality. 

Big results start with clear information and smart decisions.

Difficulty: complex
Value: ~ $520 to $2.200 USD
Details
Minimum
Value: $520
Maximum
Value: $2.200

Duration: ~ 3 to 2 Weeks
Details
Minimum
Hours: 20
Days: 3
Maximum
Hours: 80
Days: 10
Weeks: 2
Value: ~ $90 to $370 USD
Details
Minimum
Value: $90
Maximum
Value: $370

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 3
Maximum
Hours: 10
Days: 1
Value: ~ $90 to $370 USD
Details
Minimum
Value: $90
Maximum
Value: $370

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 3
Maximum
Hours: 10
Days: 1
Value: ~ $220 to $910 USD
Details
Minimum
Value: $220
Maximum
Value: $910

Duration: ~ 1 to 4 Days
Details
Minimum
Hours: 8
Maximum
Hours: 30
Days: 4
Value: ~ $70 to $300 USD
Details
Minimum
Value: $70
Maximum
Value: $300

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 3
Maximum
Hours: 10
Days: 1
Value: ~ $60 to $240 USD
Details
Minimum
Value: $60
Maximum
Value: $240

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 2
Maximum
Hours: 8
Days: 1

Don’t let the numbers scare you, let’s talk!

The Juicy Details!

All treats, no tricks, just the sweet facts! 🍭

Gather ’round the tavern fire, designers and developers! We have all faced the Beholder of Bad Contrast or gotten lost in the Labyrinth of Hex Codes. Too often, our tools are dull, lifeless blades that break when we strike against the hard armor of professional file formats.

I forged Prismatico in the fires of Mount DOM to be the weapon you deserve. It is not just a utility; it is a companion. It names your colors like legendary items found in a dragon’s hoard, transforming #FF4500 into “Orange Dragon” or #10B981 into “Emerald Sage.” It brings the flavor of a Friday night campaign to your Monday morning workflow.

  1. Channeling: Drag the rune on the main pad to adjust your Light and Saturation. Use the Hue slider to shift your elemental alignment.
  2. Naming: The Oracle will automatically bestow a legendary name (e.g., “Mithril Cloud”) upon your selection.
  3. The Perception Check: Navigate to the Legibility tab. Green badges mean you passed the saving throw; Red means you critically failed.
  4. Alchemy: Enter the Mixer. Select a Start and End color, then cast “Transmute” to create a bridge of potions between them.
  5. Looting: Open the Download satchel in the footer. Choose your format to scribe your inventory for other realms.
  • Critical Role: The masters of storytelling who taught me that even the smallest detail can have a grand backstory. This influenced the RPG naming algorithm within the code.
  • Adobe Color: The ancient wizards of harmony. I studied their spellbooks to understand how to calculate Triadic and Complementary relationships.
  • The Color Out of Space: Ideally less horrific, but the concept of a color “unlike any seen on earth” drove the creation of the custom mixer.
  • Skyrim’s Inventory System: The UI layout, with its clear hierarchy and item descriptions, borrows heavily from modern RPG menu design.
  • “I found I could say things with color and shapes that I couldn’t say any other way, things I had no words for.” – Georgia O’Keeffe
  • “There are no lines in nature, only areas of colour, one against another.” – Édouard Manet
  • “You can’t use up creativity. The more you use, the more you have.” – Maya Angelou

Prismatico is a Single Page Application that functions as a Guild Hall for your colors. At its heart lies the Crystal Core – a reactive state management system – that tracks your party’s inventory (the palette) and your history (the quest log).

The interface uses a Glassmorphism aesthetic to resemble a scrying pool. You interact with the Saturation Pad to channel raw mana into specific hues. The standout feature is the Binary Transmutation Engine, which allows this web-based tool to speak the ancient tongue of desktop applications, parsing and generating .ase and .aco files byte-by-byte. It is a true bridge between the browser realm and the design kingdom.

The spark for this quest ignited during a particularly grueling raid on a design system. I realized I was carrying too many items: a contrast checker, a color picker, and a converter. I was over-encumbered. I needed a true Bag of Holding for color theory.

I was also inspired by the way tabletop games make every item feel significant through naming and lore. Why should a color just be a number? Why shouldn’t it be an entity with a name, a history, and stats?

The magic of Prismatico is fueled by the HSL Color Space. Unlike the chaotic RGB model (which is like trying to mix potions in the dark), HSL separates the Soul (Hue) from the Body (Saturation and Lightness). This allows for Harmonic Resonance, calculating complementary colors by simply rotating the Hue wheel by 180 degrees.

The WCAG 2.1 Guidelines serve as the dungeon rules. The algorithm calculates the Relative Luminance of your color (how much light it emits) and compares it to text colors. This is a pure Math check: (L1 + 0.05) / (L2 + 0.05). If the result is lower than 4.5, the check fails, and your users suffer the Blinded condition.

For the Procedural Generation of names, the code acts as a Dungeon Master table. It checks the Lightness stat: if high, it pulls from the Celestial adjective pool; if low, it draws from the Abyssal pool.

The Game-Plan!

Plotting a safe course through the scary maze! 🧭

  • The Curse of Endianness: Writing binary files for Adobe requires Big-Endian byte order, but the modern web browser speaks Little-Endian. This required a heavy translation layer.
  • The Mobile Mimic: Touch events on the canvas often mimic mouse events but behave wildly differently, causing the color cursor to jump like a teleporting goblin.
  • The Alpha Ghost: Floating point math in JavaScript is notorious for errors, which caused the transparency slider to return infinite decimals.
  • Manual Byte Scribing: I wrote a custom binary writer using DataViews that places bytes into the buffer manually, ensuring external software accepts our offering.
  • Unified Input Handler: A master function detects whether the input comes from a mouse or a touch screen and normalizes the coordinates relative to the canvas hitbox.
  • Rounding Wards: Applied strict rounding logic at the input stage to banish the floating-point ghosts before they could haunt the state management.

Prismatico levels up the entire design workflow. It grants the user enhanced efficiency (no more tabbing between three different websites to build a palette) and passive accessibility checks (ensuring no design leaves the table without being readable).

This campaign is strictly for Color Management. It is not a painting canvas nor a vector tool. It is a specialized, high-performance inventory management system for hues, tints, and shades, intentionally avoiding bloat to keep the experience lightning fast.

The Nerd Stuff!

I think we are going to need a bigger boat... ahem, I meant cauldron! ✨

JavaScript, CSS, HTML5, Canvas API, DataView, LocalStorage

The artifact is constructed using Vanilla JavaScript – no frameworks, no libraries, just pure elemental code. It uses a custom State object that acts as the character sheet, tracking all values and the palette inventory. The system recalculates UI bounds and color harmony mathematics on every frame drop without sacrificing performance.

  • Add Cloud Saves to sync palettes across devices via a database.
  • Implement WebSockets for a multiplayer mode, allowing real-time collaboration on a palette with other party members.
  • Create an image parsing feature to upload art and de-res it into a limited color palette.
  • On some mobile viewports, the browser chrome shifting can slightly misalign the canvas touch coordinates until a scroll event fires.
  • Extremely rapid clicking on the randomizer button can cause the toast notifications to overlap visually.
Start The Color Quest
Prismatico - 001
Prismatico - 002
Prismatico - 003
Prismatico - 004
Prismatico - 005
Prismatico - 006
Prismatico - 007

* Pricing, timelines, content, and designs are subject to change without prior notice.
Certain projects or aspects displayed are presented for demonstration purposes only and may include partial or placeholder content, conceptual work and/or early-stage ideas, and may not reflect the final delivered product.

* All values provided are preliminary estimates based on the scope that similar projects may present.
These are intended for general reference only and should not be considered final or binding figures.

More spooktastic codes ready to ignite your curiosity!

Movieverse - 008

Movieverse 🎬 In a World… One Site, One Page, Comes Alive…

Step into Movieverse, the ultimate Movie theater experience! Watch posters react to your gaze as the UI comes alive. Grab your tickets and dive in now! 🎬
View More!
PixelStage

PixelStage 📸 Design the frame · Own the moment

Transform flat screenshots into stunning, marketing-ready 3D mockups instantly with PixelStage. The ultimate tool for developers who would rather be coding than cropping.
View More!
phantom-protocol-002-1

Phantom Protocol 🤖 You were never here

The AI Renaissance didn't begin with a bang, but with a whisper in the static. Humanity was was optimized out! Are you ready for Phantom Protocol?
View More!
Keep Up to Date? Sure, it's cool! No thanks, I'm afraid