᠎᠎᠎          
51K

Colorful list creator

World's simplest list tool

This is a super simple browser-based application that colors items in a list. You can upload any list to the input and get a colorful illustration of its items in the output. With the help of four coloring modes, you can paint each item in a different color, highlight identical items with the same color, and visually show unique and duplicate items. You can also set the canvas dimension, font size, line height, padding, and alignment of items. Created by list geeks from team Browserling.
We put a browser in your browser! Browserling
Check out our project Browserling – get a browser in your browser and browse while you browse.
Item Splitter and Joiner
Split list items by a character.
Split list items by a regular expression.
Enter splitter symbol or regular expression.
Enter joiner symbol.
Item Coloring
All items have different colors.
Identical items have the same color.
Color only the unique list items.
Color only the duplicate list items.
Size, Font, and Alignment
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
Colorful list creator tool What is a colorful list creator?
This online utility adds colors to list items and displays them as a PNG picture. The program can simply create a neat and colorful illustration of all the items or create a visualization that groups by color the repeated items and visually separates the unique items and duplicate items. It's super helpful when you need to quickly see the structure of your list visually as color conveys the information instantly. For example, if you have a to-do list and you want to make sure no tasks are repeated in it, you can color just the repeated items and instantly see which tasks were entered twice. You can load any list of items in the input and indicate which character (or several characters) is/are used as the item separator. The separator can then be specified using a symbol or a regular expression in the options. You can also enter a different character for the output list and it will serve as an item separator in the multi-colored image. In the second block of options, you can find four visual modes. The "Use Different Item Colors" mode colors the list items with different colors. Each item gets a unique color from the rainbow palette (going from red to orange to gold to green to blue to indigo to violet). The "Highlight the Same Items" mode helps you quickly find equal items in the list. Identical items are painted in the same color, thereby visually grouping them. In the "Highlight Unique Items" mode, the unique items will get highlighted and any repeating items will be grayed out. And the last mode, "Highlight Duplicate Items", uses colors for all duplicate items. In this mode, the first occurrence of an item remains gray and a repeated occurrence has a color. To customize the output canvas, you can set its dimensions, item size, and positioning. Namely, you can set the width and height of the image, specify the font size for each item, line height, padding around the image, and align the items to the left, right, or center. The picture of the multi-colored output list items can be downloaded from the output preview window. Listabulous!
Colorful list creator examples Click to use
Create a Colorful List of Numbers
In this example, we create a colorful illustration from a list of integers from one to one hundred. We use a comma to separate the input and output items and activate the rainbow colors drawing mode. We also set the illustration to a fixed width of 725px, add 10px padding (as a border), set the font size to 48px and line-height to 50px. As a result, we get an image of all the numbers with their color having a rainbow color gradient.
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100
In this example, we create a colorful illustration from a list of integers from one to one hundred. We use a comma to separate the input and output items and activate the rainbow colors drawing mode. We also set the illustration to a fixed width of 725px, add 10px padding (as a border), set the font size to 48px and line-height to 50px. As a result, we get an image of all the numbers with their color having a rainbow color gradient.
Required options
These options will be used automatically if you select this example.
This example will reset all options to their
default values before applying new ones.
Split list items by a character.
Enter splitter symbol or regular expression.
Enter joiner symbol.
All items have different colors.
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
Find the Same Picture Game
In this example, we want to create a game called "Find Two of the Same Picture". To create this game, we pick interesting Unicode glyphs and emojis, load them into the input, and separate them by the regular expression "/[,;]\s*/" (since there is either a comma or a semicolon between the items). To make it visually easier to find two identical pictures, we paint them in the same color using the "Highlight the Same Items" mode. We place the items for the game on a square 330 by 330 pixel canvas and center them.
◐, ▦, ✐, ☯, ♡; ♠, ➑, ☀, ☃; ▦, ☂, ❆, ☠, ♫, ❆; ♚, ✿, ☘, ✦; ✩, ♡, ☀, ☠, ✿, ☯, ☎; ➹, ♠, ✩, ◐, ♫; ➹, ➑, ♚, ☎, ✐, ☘; ☂, ☃, ✦
In this example, we want to create a game called "Find Two of the Same Picture". To create this game, we pick interesting Unicode glyphs and emojis, load them into the input, and separate them by the regular expression "/[,;]\s*/" (since there is either a comma or a semicolon between the items). To make it visually easier to find two identical pictures, we paint them in the same color using the "Highlight the Same Items" mode. We place the items for the game on a square 330 by 330 pixel canvas and center them.
Required options
These options will be used automatically if you select this example.
This example will reset all options to their
default values before applying new ones.
Split list items by a regular expression.
Enter splitter symbol or regular expression.
Enter joiner symbol.
Identical items have the same color.
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
Highlight Unique Types of Nuts
In this example, we use the list coloring algorithm to find the unique items in the list. We load a list of various types of nuts, separate them by a newline character and switch to the "Highlight Unique Items" mode. In the output, we get an image of the list, which has unique items painted in bright colors and repeated items that have a neutral gray color.
Pecans Hazelnuts Pecans Almonds Hazelnuts Walnuts Cashew Pistachios Cashew Macadamias Walnuts
In this example, we use the list coloring algorithm to find the unique items in the list. We load a list of various types of nuts, separate them by a newline character and switch to the "Highlight Unique Items" mode. In the output, we get an image of the list, which has unique items painted in bright colors and repeated items that have a neutral gray color.
Required options
These options will be used automatically if you select this example.
This example will reset all options to their
default values before applying new ones.
Split list items by a character.
Enter splitter symbol or regular expression.
Enter joiner symbol.
Color only the unique list items.
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
Color Duplicate List Items
In this example, we want to find all duplicate items in a list of essential vitamins. We split the list items by a comma and use a space character for the output list. We choose the "Highlight Duplicate Items" mode, set the image width to 440 pixels, and add 10-pixel padding on all sides. As a result, the items that are mentioned a second, third, or more times are highlighted in bright colors but their first occurrence is left gray.
A, A, A, C, C, C, C, D, D, E, E, E, E, K, K, K, K, B1, B1, B1, B2, B3, B3, B3, B6, B6, B6, B6, B12, B12, B12, B5, B5, B5, B5, B7, B7, B7, B9, B9
In this example, we want to find all duplicate items in a list of essential vitamins. We split the list items by a comma and use a space character for the output list. We choose the "Highlight Duplicate Items" mode, set the image width to 440 pixels, and add 10-pixel padding on all sides. As a result, the items that are mentioned a second, third, or more times are highlighted in bright colors but their first occurrence is left gray.
Required options
These options will be used automatically if you select this example.
This example will reset all options to their
default values before applying new ones.
Split list items by a character.
Enter splitter symbol or regular expression.
Enter joiner symbol.
Color only the duplicate list items.
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
Create a Multicolor Grid
In this example, we create a fun multi-colored grid. To do this, we load a list of Unicode block elements and as there are no separators between the blocks, we use the regex "//" to find each Unicode glyph. We set the canvas to a fixed size of 361 by 400 pixels and draw all the blocks in different colors. Thus, we get a QR code-like picture that shimmers in the style of a rainbow.
▛▚▝▟▚▙▘▙▟▛▙▙▘▚▝▛▚▜▜▛▘▚▞▛▜▜▝▟▞▜▘▛▛▚▚▚▝▟▟▘▙▚▝▚▟▞▜▙▜▟▘▜▛▚▛▞▛▟▛▞▜▛▙▝▘▟▛▛▘▙▛▟
In this example, we create a fun multi-colored grid. To do this, we load a list of Unicode block elements and as there are no separators between the blocks, we use the regex "//" to find each Unicode glyph. We set the canvas to a fixed size of 361 by 400 pixels and draw all the blocks in different colors. Thus, we get a QR code-like picture that shimmers in the style of a rainbow.
Required options
These options will be used automatically if you select this example.
This example will reset all options to their
default values before applying new ones.
Split list items by a regular expression.
Enter splitter symbol or regular expression.
Enter joiner symbol.
All items have different colors.
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
Color a Todo List
This example adds colors to a summer todo list. As we spent all winter waiting for the summer, we accidentally wrote down the same items in the list. To quickly see only the unique things we want to do this summer, we use the unique item coloring mode.
• eat ice cream • play football • go swimming • go camping • ride a zip line • eat ice cream • tent in the backyard • play football • play in the rain • run a 5k • make a cairn • go swimming • eat ice cream • build a sandcastle
This example adds colors to a summer todo list. As we spent all winter waiting for the summer, we accidentally wrote down the same items in the list. To quickly see only the unique things we want to do this summer, we use the unique item coloring mode.
Required options
These options will be used automatically if you select this example.
This example will reset all options to their
default values before applying new ones.
Split list items by a character.
Enter splitter symbol or regular expression.
Enter joiner symbol.
Color only the unique list items.
Image width.
Image height.
Add padding around the list.
Font size.
Line height.
Horizontal item alignment.
All list tools
Didn't find the tool you were looking for? Let us know what tool we are missing and we'll build it!
Quickly print all distinct items of a list.
Quickly print all repeating items of a list.
Quickly count the number of items in a list.
Quickly display list items in multiple colors.
Quickly generate a list of arbitrary length with arbitrary items.
Quickly generate a random length list with random items.
Quickly find certain items in a list.
Quickly replace certain items in a list with new items.
Quickly remove items from a list that match a pattern.
Quickly print all list items in reverse order.
Quickly sort list items alphabetically or numerically.
Quickly shuffle list items and make it random.
Quickly randomly pick one or more items from a list.
Quickly create a downloadable image from a list.
Quickly set a new delimiter for items in a list.
Quickly remove the symbol that separates list items.
Quickly change list item delimiters to the same symbol.
Quickly remove items from the beginning or end of a list.
Quickly join all items of a list together.
Quickly create groups of multiple list items.
Quickly extract a part of a list.
Quickly remove all empty items from a list.
Quickly remove whitespace characters around list items.
Quickly create multiple copies of a list.
Quickly rotate list items to the left or right (or up and down).
Quickly enumerate list items and add a counter to them.
Quickly add bullet markers to all items in a list.
Quickly remove all bullet markers from list items.
Quickly wrap all list items in quotes.
Quickly remove all quotation marks from around list items.
Quickly add text on the left and right sides of all list items.
Quickly remove text from the left and right sides of all list items.
Quickly prepend a prefix before each list item.
Quickly delete any prefix from the beginning of all list items.
Quickly append a suffix after each list item.
Quickly delete any suffix from the end of all list items.
Quickly add or remove list items to make it a certain length.
Quickly create multiple columns from a single list.
Quickly create a palindromic list from the given list.
Quickly add new items at the beginning or end of a list.
Quickly left-pad a list with one or more items.
Quickly right-pad a list with one or more items.
Quickly remove items that repeat in a list.
Quickly apply a filter on all list items (extract certain items).
Quickly analyze a list and print its item statistics.
Coming soon These list tools are on the way
Edit a List
View and edit lists in a neat browser-based list editor.
Split a List
Split list items into chunks.
Generate the Powerlist
Create the powerlist of the given list.
Find the Car of a List
Extract the first item from a list.
Find the Cdr of a List
Extract all items except the first of a list.
Apply a Function on a List
Run a JavaScript function on every list item.
Find Certain List Items
Quickly find and print items that interest you in a list.
Find Repeating List Items
Quickly find and print items that repeat in a list.
Delete Unique List Items
Quickly find and remove items that are unique in a list.
Extract a Sublist from a List
Given start and stop indexes, extract a sublist from a list.
Shift List Items
Shift list items to the left or right (or up and down).
Indent List Items
Add indentation to all list items.
Mirror a List
Quickly create a mirror copy of a list.
Invert a List
Invert the order of items in a list (last becomes first, etc).
Reduce a List
Run the reduce function on a list.
Convert a List to Rows
Create multiple rows from a single list.
Convert a List to Excel
Create an Excel (XLS/XLSX) file from a list.
Convert a List to PDF
Create a PDF file from a list.
Convert a Text List to a LaTeX List
Create a LaTeX list from a regular text list.
Convert a Text List to a HTML List
Create a HTML list from a regular text list.
Convert a Text List to a Markdown List
Create a Markdown list from a regular text list.
Compare Two Lists
Find the difference between two lists.
Compare Three Lists
Find the difference between three lists.
Remove One List from Another
Remove elements from a list that appear in the other list.
Find Common Items in Lists
Find items that are shared between two or more lists.
Find Distinct Items in Lists
Find items that are unique in two or more lists.
Zip Two Lists
Join two or more lists together item by item.
Unzip Two Lists
Split an interleaved list into two or more separate lists.
Merge Two Lists
Append a second list at the end of the first list.
Pair List Items
Create pairs from all list items.
Pop List Items
Remove list items at certain index positions.
Push List Items
Add new items at the end of a list.
Splice a List
Modify a list in-place by adding, replacing, or removing items.
Flatten a List
Remove all indentation levels from a list and make it flat.
Make List Items Title Case
Quickly change the letter case of all items to title case.
Make List Items Proper Case
Quickly change the letter case of all items to proper case.
Make List Items Random Case
Quickly randomly change the letter case of all items.
Make List Items Lowercase
Quickly change the letter case of all items to small letters.
Make List Items Uppercase
Quickly change the letter case of all items to capital letters.
Remove List Item Counter
Quickly remove any numeration from a list of items.
Create the Empty List
Generate a list with no items.
Visualize a List
Quickly create a graphical representation of a list.
Create a List Cloud
Create an image with a cloud of list items.
Create a Spiral List
Create an image with list items going in a spiral.
Create a ZigZag List
Make list items go in a zigzag.
Add Errors to a List
Add errors and corruption to a list.
Base64-encode a List
Convert any list to base64 encoding.
Base64-decode a List
Convert any list from base64 encoding back to a list.
URL-encode a List
Convert any list to URL encoding.
URL-decode a List
Convert any list from URL encoding back to a list.
Convert a List to JSON
Create a JSON array from a list.
Convert JSON to a List
Create a list from a JSON array.
Convert a List to XML
Create an XML document from a list.
Convert XML to a List
Create a list from an XML document.
Convert a List to YAML
Create a YAML file from a list.
Convert YAML to a List
Create a list from a YAML file.
Convert a Text List to a Binary List
Create a binary list from a text list.
Convert a Binary List to a Text List
Create a text list from a binary list.
Compress a List
Compress a list so it uses less space.
Let Zalgo Destroy a List
Let Zalgo loose on a list and create list-chaos.