Difference between revisions of "OCTOPUS Colori"

Revision as of 19:22, 14 September 2026

The first video tool – for building video tools.

Build grades, optical simulations, film emulation, diagnostic tools, color operations - anything. And then run them instantly on your local machine with real-time tactile control.

Free Download
No credit card required.
For Windows & macOS.

Keep your Adobe workflow. With Colori for Premiere, you can send your Colori tools straight to Premiere.
Learn more about Colori for Premiere ›

Instant tactile feedback. Colori tools run in real-time on your machine’s GPU. Manipulate sliders, pick colors and more with instant feedback.

Use free or with a paid plan

Download Plans

Supported platforms & system requirements ›

@@ Line 25: / Line 25: @@
 #vg video { display: block; width: 100%; height: auto;
    aspect-ratio: 2048 / 1080; object-fit: contain; background: #000; }
-#vg .dots { display: flex; justify-content: center; align-items: center; gap: 18px;
+#vg .dots { display: flex; justify-content: center; align-items: center; gap: 0;
-   margin: 32px auto 0; padding: 16px 26px; width: max-content;
+   margin: 32px auto 0; padding: 8px 16px; width: max-content;
    background: rgba(0,0,0,.75); border-radius: 999px; }
-#vg .dots button { width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
+#vg .dots button { box-sizing: content-box; width: 9px; height: 9px; padding: 0;
-   border-radius: 50%; background: rgba(255,255,255,.7); color: rgba(255,255,255,.7);
+  border: 10px solid transparent; background-clip: content-box; cursor: pointer;
+   border-radius: 50%; background-color: rgba(255,255,255,.7); color: rgba(255,255,255,.7);
    line-height: 1; display: flex; align-items: center; justify-content: center;
-   transition: background .2s, color .2s; flex: none; overflow: hidden;
+   transition: background-color .2s, color .2s; flex: none; overflow: hidden;
    -webkit-tap-highlight-color: transparent; animation: none !important; }
-#vg .dots button::before,
+#vg .dots button:hover { background-color: #fff; }
-#vg .dots button::after { display: none !important; content: none !important; }
+#vg .dots button.active { width: 24px; height: 24px; font-size: 17px;
-#vg .dots button:focus { outline: none; }
+  background-color: transparent; color: rgba(255,255,255,.7); padding-bottom: 2px;
-#vg .dots button::-moz-focus-inner { border: 0; }
+  transition: color .2s; margin-left: -4px; margin-right: -4px; }
-#vg .dots button:hover { background: #fff; }
+#vg .dots button.active:hover { background-color: transparent; color: #fff; }
-#vg .dots button:active,
-#vg .dots button:focus { box-shadow: none !important; background-image: none; }
-#vg .dots button.active { width: 24px; height: 24px; font-size: 17px; background: none;
-  color: rgba(255,255,255,.7); padding-bottom: 2px; transition: color .2s; margin-left: -4px; margin-right: -4px; }
-#vg .dots button.active:hover { background: none; color: #fff; }
-#vg .dots button.active:active,
-#vg .dots button.active:focus { background: none !important; box-shadow: none !important; }
 @media (max-width: 1023px) {
    #vg video { aspect-ratio: 5 / 4; object-fit: cover; object-position: center; }