<div style="container-type: inline-size;"> <div style="display: grid; grid-template: repeat(2, 16cqw) / repeat(2, 50cqw); border-radius: 0.5em; overflow: hidden; font-family: var(--font-monospace); font-size: 8cqw;"> <div style="display: flex; align-items: center; justify-content: center; background-color: #a08cc0; color: #fff; overflow: hidden;">Purplrue</div> <div style="display: flex; align-items: center; justify-content: center; background-color: #fff; color: #a08cc0; overflow: hidden;">Purplrue</div> <div style="display: flex; align-items: center; justify-content: center; background-color: #000; color: #a08cc0; overflow: hidden;">Purplrue</div> <div style="display: flex; align-items: center; justify-content: center; background-color: #a08cc0; color: #000; overflow: hidden;">Purplrue</div> </div> </div> ## Hex Code ``` #a08cc0 ``` ``` #A08CC0 ``` ## Other Representations ```css oklch(67.6% 0.078 302) ``` ```css hsl(263 29% 65%) ``` ```css rgb(160 140 192) ``` ## 1x1 pixel images ``` data:image/bmp;base64,Qk0eAAAAAAAAABoAAAAMAAAAAQABAAEAGADAjKAA ``` ``` data:image/gif;base64,R0lGODdhAQABAIABAAAAAKCMwCwAAAAAAQABAAACAkwBADs= ``` ``` data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAdQxoIWuP+BiOh/AAA= ``` ``` data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mNY0HMAAAO8Ae20nEaTAAAAAElFTkSuQmCC ```