diff --git a/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js b/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js
index c31ed86b3f8..e14fd3e6949 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/hashtag-css-generator.js
@@ -9,33 +9,19 @@ export default {
    * cooked posts, and the sidebar.
    *
    * Each type has its own corresponding class, which is registered
-   * with the hastag type via api.registerHashtagType. The default
+   * with the hashtag type via api.registerHashtagType. The default
    * ones in core are CategoryHashtagType and TagHashtagType.
    */
   initialize(owner) {
     this.site = owner.lookup("service:site");
 
-    // If the site is login_required and the user is anon there will be no categories
-    // preloaded, so there will be no category color CSS variables generated by
-    // the category-color-css-generator initializer.
-    if (!this.site.categories?.length) {
-      return;
-    }
-
-    let generatedCssClasses = [];
-
-    Object.values(getHashtagTypeClasses()).forEach((hashtagType) => {
-      hashtagType.preloadedData.forEach((model) => {
-        generatedCssClasses = generatedCssClasses.concat(
-          hashtagType.generateColorCssClasses(model)
-        );
-      });
-    });
-
     const cssTag = document.createElement("style");
     cssTag.type = "text/css";
     cssTag.id = "hashtag-css-generator";
-    cssTag.innerHTML = generatedCssClasses.join("\n");
+    cssTag.innerHTML = Object.values(getHashtagTypeClasses())
+      .map((hashtagType) => hashtagType.generatePreloadedCssClasses())
+      .flat()
+      .join("\n");
     document.head.appendChild(cssTag);
   },
 };
diff --git a/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js b/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
index 8f112a0c482..f36ba31a83b 100644
--- a/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
+++ b/app/assets/javascripts/discourse/app/lib/hashtag-autocomplete.js
@@ -228,6 +228,8 @@ function _searchRequest(term, contextualHashtagConfiguration, resultFunc) {
 
         const hashtagType = getHashtagTypeClassesNew()[result.type];
         result.icon = hashtagType.generateIconHTML({
+          preloaded: true,
+          colors: result.colors,
           icon: result.icon,
           id: result.id,
         });
diff --git a/app/assets/javascripts/discourse/app/lib/hashtag-decorator.js b/app/assets/javascripts/discourse/app/lib/hashtag-decorator.js
index c8584e653d4..5ab5df04b9f 100644
--- a/app/assets/javascripts/discourse/app/lib/hashtag-decorator.js
+++ b/app/assets/javascripts/discourse/app/lib/hashtag-decorator.js
@@ -63,7 +63,10 @@ function _findAndReplaceSeenHashtagPlaceholder(
     // Replace raw span for the hashtag with a cooked one
     const matchingSeenHashtag = seenHashtags[type]?.[slugRef];
     if (matchingSeenHashtag) {
-      generatePlaceholderHashtagHTML(type, hashtagSpan, matchingSeenHashtag);
+      generatePlaceholderHashtagHTML(type, hashtagSpan, {
+        preloaded: true,
+        ...matchingSeenHashtag,
+      });
     }
   });
 }
diff --git a/app/assets/javascripts/discourse/app/lib/hashtag-types/base.js b/app/assets/javascripts/discourse/app/lib/hashtag-types/base.js
index 4de8a448250..f8fe5fc1ebd 100644
--- a/app/assets/javascripts/discourse/app/lib/hashtag-types/base.js
+++ b/app/assets/javascripts/discourse/app/lib/hashtag-types/base.js
@@ -1,8 +1,37 @@
 import { setOwner } from "@ember/application";
+import { debounce } from "@ember/runloop";
+import { ajax } from "discourse/lib/ajax";
+import { getHashtagTypeClasses } from "discourse/lib/hashtag-type-registry";
 
 export default class HashtagTypeBase {
+  // Store a list of IDs that are currently being loaded globally to make it
+  // easier to batch requests for multiple types of hashtags
+  static loadingIds = {};
+
+  static async _load() {
+    const data = HashtagTypeBase.loadingIds;
+    HashtagTypeBase.loadingIds = {};
+
+    let hasData = false;
+    Object.keys(data).forEach((type) => {
+      hasData ||= data[type].size > 0;
+      data[type] = [...data[type]]; // Set to Array
+    });
+
+    if (!hasData) {
+      return;
+    }
+
+    const hashtags = await ajax("/hashtags/by-ids", { data });
+    const typeClasses = getHashtagTypeClasses();
+    Object.entries(typeClasses).forEach(([type, typeClass]) =>
+      hashtags[type]?.forEach((hashtag) => typeClass.onLoad(hashtag))
+    );
+  }
+
   constructor(owner) {
     setOwner(this, owner);
+    this.loadedIds = new Set();
   }
 
   get type() {
@@ -13,6 +42,15 @@ export default class HashtagTypeBase {
     throw "not implemented";
   }
 
+  generatePreloadedCssClasses() {
+    const cssClasses = [];
+    this.preloadedData.forEach((model) => {
+      this.loadedIds.add(model.id);
+      cssClasses.push(this.generateColorCssClasses(model));
+    });
+    return cssClasses.flat();
+  }
+
   generateColorCssClasses() {
     throw "not implemented";
   }
@@ -20,4 +58,29 @@ export default class HashtagTypeBase {
   generateIconHTML() {
     throw "not implemented";
   }
+
+  isLoaded(id) {
+    id = parseInt(id, 10);
+    return this.loadedIds.has(id);
+  }
+
+  load(id) {
+    id = parseInt(id, 10);
+    if (!this.isLoaded(id)) {
+      (HashtagTypeBase.loadingIds[this.type] ||= new Set()).add(id);
+      debounce(HashtagTypeBase, HashtagTypeBase._load, 100, false);
+    }
+  }
+
+  onLoad(hashtag) {
+    const hashtagId = parseInt(hashtag.id, 10);
+    if (!this.isLoaded(hashtagId)) {
+      this.loadedIds.add(hashtagId);
+
+      // Append the styles for the loaded hashtag to the CSS generated by the
+      // `hashtag-css-generator` initializer for preloaded models
+      document.querySelector("#hashtag-css-generator").innerHTML +=
+        "\n" + this.generateColorCssClasses(hashtag).join("\n");
+    }
+  }
 }
diff --git a/app/assets/javascripts/discourse/app/lib/hashtag-types/category.js b/app/assets/javascripts/discourse/app/lib/hashtag-types/category.js
index c362bf32564..24cac59c4a5 100644
--- a/app/assets/javascripts/discourse/app/lib/hashtag-types/category.js
+++ b/app/assets/javascripts/discourse/app/lib/hashtag-types/category.js
@@ -12,29 +12,50 @@ export default class CategoryHashtagType extends HashtagTypeBase {
     return this.site.categories || [];
   }
 
-  generateColorCssClasses(category) {
-    const generatedCssClasses = [];
-    const backgroundGradient = [`var(--category-${category.id}-color) 50%`];
-    if (category.parentCategory) {
-      backgroundGradient.push(
-        `var(--category-${category.parentCategory.id}-color) 50%`
-      );
+  generatePreloadedCssClasses() {
+    return [
+      // Set a default color for category hashtags. This is added here instead
+      // of `hashtag.scss` because of the CSS precedence rules (<link> has a
+      // higher precedence than <style>)
+      ".hashtag-category-badge { background-color: var(--primary-medium); }",
+      ...super.generatePreloadedCssClasses(),
+    ];
+  }
+
+  generateColorCssClasses(categoryOrHashtag) {
+    let color, parentColor;
+    if (categoryOrHashtag.colors) {
+      if (categoryOrHashtag.colors.length === 1) {
+        color = categoryOrHashtag.colors[0];
+      } else {
+        parentColor = categoryOrHashtag.colors[0];
+        color = categoryOrHashtag.colors[1];
+      }
     } else {
-      backgroundGradient.push(`var(--category-${category.id}-color) 50%`);
+      color = categoryOrHashtag.color;
+      if (categoryOrHashtag.parentCategory) {
+        parentColor = categoryOrHashtag.parentCategory.color;
+      }
     }
 
-    generatedCssClasses.push(`.hashtag-color--category-${category.id} {
-  background: linear-gradient(-90deg, ${backgroundGradient.join(", ")});
-}`);
+    let style;
+    if (parentColor) {
+      style = `background: linear-gradient(-90deg, #${color} 50%, #${parentColor} 50%);`;
+    } else {
+      style = `background-color: #${color};`;
+    }
 
-    return generatedCssClasses;
+    return [`.hashtag-color--category-${categoryOrHashtag.id} { ${style} }`];
   }
 
   generateIconHTML(hashtag) {
-    const hashtagId = parseInt(hashtag.id, 10);
-    const colorCssClass = !this.preloadedData.mapBy("id").includes(hashtagId)
-      ? "hashtag-missing"
-      : `hashtag-color--${this.type}-${hashtag.id}`;
+    hashtag.preloaded ? this.onLoad(hashtag) : this.load(hashtag.id);
+
+    const colorCssClass = `hashtag-color--${this.type}-${hashtag.id}`;
     return `<span class="hashtag-category-badge ${colorCssClass}"></span>`;
   }
+
+  isLoaded(id) {
+    return !this.site.lazy_load_categories || super.isLoaded(id);
+  }
 }
diff --git a/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js b/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js
index 6340f09ab0d..ee994789ea7 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/css-generator-test.js
@@ -24,7 +24,11 @@ acceptance("CSS Generator", function (needs) {
     const cssTag = document.querySelector("style#category-color-css-generator");
     assert.equal(
       cssTag.innerHTML,
-      ":root {\n--category-1-color: #ff0000;\n--category-2-color: #333;\n--category-4-color: #2B81AF;\n}"
+      ":root {\n" +
+        "--category-1-color: #ff0000;\n" +
+        "--category-2-color: #333;\n" +
+        "--category-4-color: #2B81AF;\n" +
+        "}"
     );
   });
 
@@ -33,7 +37,10 @@ acceptance("CSS Generator", function (needs) {
     const cssTag = document.querySelector("style#hashtag-css-generator");
     assert.equal(
       cssTag.innerHTML,
-      ".hashtag-color--category-1 {\n  background: linear-gradient(-90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n  background: linear-gradient(-90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n  background: linear-gradient(-90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}"
+      ".hashtag-category-badge { background-color: var(--primary-medium); }\n" +
+        ".hashtag-color--category-1 { background-color: #ff0000; }\n" +
+        ".hashtag-color--category-2 { background-color: #333; }\n" +
+        ".hashtag-color--category-4 { background-color: #2B81AF; }"
     );
   });
 
@@ -42,7 +49,9 @@ acceptance("CSS Generator", function (needs) {
     const cssTag = document.querySelector("style#category-badge-css-generator");
     assert.equal(
       cssTag.innerHTML,
-      '.badge-category[data-category-id="1"] { --category-badge-color: var(--category-1-color); --category-badge-text-color: #ffffff; }\n.badge-category[data-category-id="2"] { --category-badge-color: var(--category-2-color); --category-badge-text-color: #ffffff; }\n.badge-category[data-category-id="4"] { --category-badge-color: var(--category-4-color); --category-badge-text-color: #ffffff; }'
+      '.badge-category[data-category-id="1"] { --category-badge-color: var(--category-1-color); --category-badge-text-color: #ffffff; }\n' +
+        '.badge-category[data-category-id="2"] { --category-badge-color: var(--category-2-color); --category-badge-text-color: #ffffff; }\n' +
+        '.badge-category[data-category-id="4"] { --category-badge-color: var(--category-4-color); --category-badge-text-color: #ffffff; }'
     );
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/hashtag-autocomplete-test.js b/app/assets/javascripts/discourse/tests/acceptance/hashtag-autocomplete-test.js
index 2f4ec8d8bcd..42268677be2 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/hashtag-autocomplete-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/hashtag-autocomplete-test.js
@@ -21,14 +21,17 @@ acceptance("#hashtag autocompletion in composer", function (needs) {
       return helper.response({
         results: [
           {
+            id: 28,
             text: ":bug: Other Languages",
             slug: "other-languages",
+            colors: ["FF0000"],
             icon: "folder",
             relative_url: "/c/other-languages/28",
             ref: "other-languages",
             type: "category",
           },
           {
+            id: 300,
             text: "notes x 300",
             slug: "notes",
             icon: "tag",
@@ -37,6 +40,7 @@ acceptance("#hashtag autocompletion in composer", function (needs) {
             type: "tag",
           },
           {
+            id: 281,
             text: "photos x 281",
             slug: "photos",
             icon: "tag",
diff --git a/app/assets/stylesheets/common/components/hashtag.scss b/app/assets/stylesheets/common/components/hashtag.scss
index c93d2db62fc..f7d75ccd3ec 100644
--- a/app/assets/stylesheets/common/components/hashtag.scss
+++ b/app/assets/stylesheets/common/components/hashtag.scss
@@ -33,16 +33,6 @@ a.hashtag {
   .hashtag-icon-placeholder {
     font-size: var(--font-down-2);
     margin: 0 0.33em 0 0.1em;
-
-    &.hashtag-missing {
-      color: var(--primary-medium);
-      &.d-icon-square-full {
-        width: 8px;
-        height: 10px;
-        margin-bottom: 0;
-        margin-right: 0.7em;
-      }
-    }
   }
 
   img.emoji {
@@ -62,10 +52,6 @@ a.hashtag {
     margin-right: 0.25em;
     margin-left: 0.1em;
     display: inline-block;
-
-    &.hashtag-missing {
-      background-color: var(--primary-medium);
-    }
   }
 }
 
diff --git a/app/controllers/hashtags_controller.rb b/app/controllers/hashtags_controller.rb
index e650bf16943..3f7a36e7bde 100644
--- a/app/controllers/hashtags_controller.rb
+++ b/app/controllers/hashtags_controller.rb
@@ -1,7 +1,19 @@
 # frozen_string_literal: true
 
 class HashtagsController < ApplicationController
-  requires_login
+  # Anonymous users can still see public posts which may contain hashtags
+  requires_login except: [:by_ids]
+
+  def by_ids
+    raise Discourse::NotFound if SiteSetting.login_required? && !current_user
+
+    ids =
+      HashtagAutocompleteService
+        .data_source_types
+        .each_with_object({}) { |type, hash| hash[type] = params[type]&.map(&:to_i) }
+
+    render json: HashtagAutocompleteService.new(guardian).find_by_ids(ids)
+  end
 
   def lookup
     render json: HashtagAutocompleteService.new(guardian).lookup(params[:slugs], params[:order])
diff --git a/app/services/category_hashtag_data_source.rb b/app/services/category_hashtag_data_source.rb
index 5d19b7a1051..299a7fdc731 100644
--- a/app/services/category_hashtag_data_source.rb
+++ b/app/services/category_hashtag_data_source.rb
@@ -22,6 +22,7 @@ class CategoryHashtagDataSource
       item.slug = category.slug
       item.description = category.description_text
       item.icon = icon
+      item.colors = [category.parent_category&.color, category.color].compact
       item.relative_url = category.url
       item.id = category.id
 
@@ -31,6 +32,10 @@ class CategoryHashtagDataSource
     end
   end
 
+  def self.find_by_ids(guardian, ids)
+    Category.secured(guardian).where(id: ids).map { |category| category_to_hashtag_item(category) }
+  end
+
   def self.lookup(guardian, slugs)
     user_categories =
       Category
@@ -51,7 +56,7 @@ class CategoryHashtagDataSource
     base_search =
       Category
         .secured(guardian)
-        .select(:id, :parent_category_id, :slug, :name, :description)
+        .select(:id, :parent_category_id, :slug, :name, :description, :color)
         .includes(:parent_category)
 
     if condition == HashtagAutocompleteService.search_conditions[:starts_with]
diff --git a/app/services/hashtag_autocomplete_service.rb b/app/services/hashtag_autocomplete_service.rb
index 4ed2bea573e..32141bcb85a 100644
--- a/app/services/hashtag_autocomplete_service.rb
+++ b/app/services/hashtag_autocomplete_service.rb
@@ -85,6 +85,9 @@ class HashtagAutocompleteService
     # The icon to display in the UI autocomplete menu for the item.
     attr_accessor :icon
 
+    # The colors to use when displaying the symbol/icon for the hashtag, e.g. category badge
+    attr_accessor :colors
+
     # Distinguishes between different entities e.g. tag, category.
     attr_accessor :type
 
@@ -106,6 +109,7 @@ class HashtagAutocompleteService
       @text = params[:text]
       @description = params[:description]
       @icon = params[:icon]
+      @colors = params[:colors]
       @type = params[:type]
       @ref = params[:ref]
       @slug = params[:slug]
@@ -118,6 +122,7 @@ class HashtagAutocompleteService
         text: self.text,
         description: self.description,
         icon: self.icon,
+        colors: self.colors,
         type: self.type,
         ref: self.ref,
         slug: self.slug,
@@ -130,6 +135,22 @@ class HashtagAutocompleteService
     @guardian = guardian
   end
 
+  def find_by_ids(ids_by_type)
+    HashtagAutocompleteService
+      .data_source_types
+      .each_with_object({}) do |type, hash|
+        next if ids_by_type[type].blank?
+
+        data_source = HashtagAutocompleteService.data_source_from_type(type)
+        next if !data_source.respond_to?(:find_by_ids)
+
+        hashtags = data_source.find_by_ids(guardian, ids_by_type[type])
+        next if hashtags.blank?
+
+        hash[type] = set_types(hashtags, type).map(&:to_h)
+      end
+  end
+
   ##
   # Finds resources of the provided types by their exact slugs, unlike
   # search which can search partial names, slugs, etc. Used for cooking
diff --git a/config/routes.rb b/config/routes.rb
index 51ee33f4428..3344551a184 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1207,6 +1207,7 @@ Discourse::Application.routes.draw do
     end
 
     get "hashtags" => "hashtags#lookup"
+    get "hashtags/by-ids" => "hashtags#by_ids"
     get "hashtags/search" => "hashtags#search"
 
     TopTopic.periods.each do |period|
diff --git a/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js b/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
index 36f13b90204..d3a588e22f0 100644
--- a/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
+++ b/plugins/chat/assets/javascripts/discourse/lib/hashtag-types/channel.js
@@ -5,6 +5,7 @@ import { iconHTML } from "discourse-common/lib/icon-library";
 export default class ChannelHashtagType extends HashtagTypeBase {
   @service chatChannelsManager;
   @service currentUser;
+  @service site;
 
   get type() {
     return "channel";
@@ -18,19 +19,25 @@ export default class ChannelHashtagType extends HashtagTypeBase {
     }
   }
 
-  generateColorCssClasses(channel) {
+  generateColorCssClasses(channelOrHashtag) {
+    const color = channelOrHashtag.colors
+      ? channelOrHashtag.colors[0]
+      : channelOrHashtag.chatable.color;
+
     return [
-      `.d-icon.hashtag-color--${this.type}-${channel.id} { color: var(--category-${channel.chatable.id}-color); }`,
+      `.d-icon.hashtag-color--${this.type}-${channelOrHashtag.id} { color: #${color} }`,
     ];
   }
 
   generateIconHTML(hashtag) {
-    const hashtagId = parseInt(hashtag.id, 10);
-    const colorCssClass = !this.preloadedData.mapBy("id").includes(hashtagId)
-      ? "hashtag-missing"
-      : `hashtag-color--${this.type}-${hashtag.id}`;
+    hashtag.colors ? this.onLoad(hashtag) : this.load(hashtag.id);
+
     return iconHTML(hashtag.icon, {
-      class: colorCssClass,
+      class: `hashtag-color--${this.type}-${hashtag.id}`,
     });
   }
+
+  isLoaded(id) {
+    return !this.site.lazy_load_categories || super.isLoaded(id);
+  }
 }
diff --git a/plugins/chat/lib/chat/channel_hashtag_data_source.rb b/plugins/chat/lib/chat/channel_hashtag_data_source.rb
index 38276982bd2..6a1bebb8b66 100644
--- a/plugins/chat/lib/chat/channel_hashtag_data_source.rb
+++ b/plugins/chat/lib/chat/channel_hashtag_data_source.rb
@@ -20,12 +20,23 @@ module Chat
         item.description = channel.description
         item.slug = channel.slug
         item.icon = icon
+        item.colors = [channel.category.color] if channel.category_channel?
         item.relative_url = channel.relative_url
         item.type = "channel"
         item.id = channel.id
       end
     end
 
+    def self.find_by_ids(guardian, ids)
+      allowed_channel_ids_sql =
+        Chat::ChannelFetcher.generate_allowed_channel_ids_sql(guardian, exclude_dm_channels: true)
+
+      Chat::Channel
+        .where(id: ids)
+        .where("id IN (#{allowed_channel_ids_sql})")
+        .map { |channel| channel_to_hashtag_item(guardian, channel) }
+    end
+
     def self.lookup(guardian, slugs)
       return [] if !guardian.can_chat?
       Chat::ChannelFetcher
diff --git a/plugins/chat/spec/lib/chat/channel_hashtag_data_source_spec.rb b/plugins/chat/spec/lib/chat/channel_hashtag_data_source_spec.rb
index a7058658d5b..6a717476743 100644
--- a/plugins/chat/spec/lib/chat/channel_hashtag_data_source_spec.rb
+++ b/plugins/chat/spec/lib/chat/channel_hashtag_data_source_spec.rb
@@ -50,6 +50,49 @@ RSpec.describe Chat::ChannelHashtagDataSource do
     end
   end
 
+  describe "#find_by_ids" do
+    it "finds a channel by ID" do
+      result = described_class.find_by_ids(guardian, [channel1.id]).first
+      expect(result.to_h).to eq(
+        {
+          relative_url: channel1.relative_url,
+          text: "Zany Things",
+          description: "Just weird stuff",
+          colors: [channel1.chatable.color],
+          icon: "comment",
+          id: channel1.id,
+          type: "channel",
+          ref: nil,
+          slug: "random",
+        },
+      )
+    end
+
+    it "does not return a channel that a user does not have permission to view" do
+      result = described_class.find_by_ids(Guardian.new, [channel2.id]).first
+      expect(result).to eq(nil)
+
+      result = described_class.find_by_ids(guardian, [channel2.id]).first
+      expect(result).to eq(nil)
+
+      GroupUser.create(user: user, group: group)
+      result = described_class.find_by_ids(Guardian.new(user), [channel2.id]).first
+      expect(result.to_h).to eq(
+        {
+          relative_url: channel2.relative_url,
+          text: "Secret Stuff",
+          description: nil,
+          colors: [channel2.chatable.color],
+          icon: "comment",
+          id: channel2.id,
+          type: "channel",
+          ref: nil,
+          slug: "secret",
+        },
+      )
+    end
+  end
+
   describe "#lookup" do
     it "finds a channel by a slug" do
       result = described_class.lookup(guardian, ["random"]).first
@@ -58,6 +101,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
           relative_url: channel1.relative_url,
           text: "Zany Things",
           description: "Just weird stuff",
+          colors: [channel1.chatable.color],
           icon: "comment",
           id: channel1.id,
           type: "channel",
@@ -78,6 +122,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
           relative_url: channel2.relative_url,
           text: "Secret Stuff",
           description: nil,
+          colors: [channel2.chatable.color],
           icon: "comment",
           id: channel2.id,
           type: "channel",
@@ -137,6 +182,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
           relative_url: channel1.relative_url,
           text: "Zany Things",
           description: "Just weird stuff",
+          colors: [channel1.chatable.color],
           icon: "comment",
           id: channel1.id,
           type: "channel",
@@ -153,6 +199,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
           relative_url: channel1.relative_url,
           text: "Zany Things",
           description: "Just weird stuff",
+          colors: [channel1.chatable.color],
           icon: "comment",
           id: channel1.id,
           type: "channel",
@@ -172,6 +219,7 @@ RSpec.describe Chat::ChannelHashtagDataSource do
           relative_url: channel2.relative_url,
           text: "Secret Stuff",
           description: nil,
+          colors: [channel2.chatable.color],
           icon: "comment",
           id: channel2.id,
           type: "channel",
diff --git a/plugins/chat/spec/system/hashtag_autocomplete_spec.rb b/plugins/chat/spec/system/hashtag_autocomplete_spec.rb
index 6f93e0b5400..ef635f8f82f 100644
--- a/plugins/chat/spec/system/hashtag_autocomplete_spec.rb
+++ b/plugins/chat/spec/system/hashtag_autocomplete_spec.rb
@@ -159,13 +159,15 @@ describe "Using #hashtag autocompletion to search for and lookup channels", type
     it "shows a default color and css class for the channel icon in a post" do
       topic_page.visit_topic(topic, post_number: post_with_private_category.post_number)
       expect(page).to have_css(".hashtag-cooked")
-      expect(page).to have_css(".hashtag-cooked .hashtag-missing")
+      css_class = ".hashtag-color--channel--#{management_channel.id}"
+      expect(find("#hashtag-css-generator", visible: false).text(:all)).not_to include(css_class)
     end
 
     it "shows a default color and css class for the channel icon in a channel" do
       chat_page.visit_channel(channel1)
       expect(page).to have_css(".hashtag-cooked")
-      expect(page).to have_css(".hashtag-cooked .hashtag-missing")
+      css_class = ".hashtag-color--channel-#{management_channel.id}"
+      expect(find("#hashtag-css-generator", visible: false).text(:all)).not_to include(css_class)
     end
   end
 end
diff --git a/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js b/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
index a25881c1cf6..0827ad711ab 100644
--- a/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
+++ b/plugins/chat/test/javascripts/acceptance/hashtag-css-generator-test.js
@@ -63,8 +63,13 @@ acceptance("Chat | Hashtag CSS Generator", function (needs) {
     const cssTag = document.querySelector("style#hashtag-css-generator");
     assert.equal(
       cssTag.innerHTML,
-
-      ".hashtag-color--category-1 {\n  background: linear-gradient(-90deg, var(--category-1-color) 50%, var(--category-1-color) 50%);\n}\n.hashtag-color--category-2 {\n  background: linear-gradient(-90deg, var(--category-2-color) 50%, var(--category-2-color) 50%);\n}\n.hashtag-color--category-4 {\n  background: linear-gradient(-90deg, var(--category-4-color) 50%, var(--category-1-color) 50%);\n}\n.d-icon.hashtag-color--channel-44 { color: var(--category-1-color); }\n.d-icon.hashtag-color--channel-74 { color: var(--category-2-color); }\n.d-icon.hashtag-color--channel-88 { color: var(--category-4-color); }"
+      ".hashtag-category-badge { background-color: var(--primary-medium); }\n" +
+        ".hashtag-color--category-1 { background-color: #ff0000; }\n" +
+        ".hashtag-color--category-2 { background-color: #333; }\n" +
+        ".hashtag-color--category-4 { background-color: #2B81AF; }\n" +
+        ".d-icon.hashtag-color--channel-44 { color: #ff0000 }\n" +
+        ".d-icon.hashtag-color--channel-74 { color: #333 }\n" +
+        ".d-icon.hashtag-color--channel-88 { color: #2B81AF }"
     );
   });
 });
diff --git a/spec/lib/pretty_text/helpers_spec.rb b/spec/lib/pretty_text/helpers_spec.rb
index 5edd14c4034..ae8c9b94591 100644
--- a/spec/lib/pretty_text/helpers_spec.rb
+++ b/spec/lib/pretty_text/helpers_spec.rb
@@ -36,6 +36,7 @@ RSpec.describe PrettyText::Helpers do
           relative_url: tag.url,
           text: "somecooltag",
           description: "Coolest things ever",
+          colors: nil,
           icon: "tag",
           id: tag.id,
           slug: "somecooltag",
@@ -54,6 +55,7 @@ RSpec.describe PrettyText::Helpers do
           relative_url: category.url,
           text: "Some Awesome Category",
           description: "Really great stuff here",
+          colors: [category.color],
           icon: "folder",
           id: category.id,
           slug: "someawesomecategory",
@@ -71,6 +73,7 @@ RSpec.describe PrettyText::Helpers do
           relative_url: category.url,
           text: "Some Awesome Category",
           description: "Really great stuff here",
+          colors: [category.color],
           icon: "folder",
           id: category.id,
           slug: "someawesomecategory",
@@ -86,6 +89,7 @@ RSpec.describe PrettyText::Helpers do
           relative_url: tag.url,
           text: "somecooltag",
           description: "Coolest things ever",
+          colors: nil,
           icon: "tag",
           id: tag.id,
           slug: "somecooltag",
@@ -100,6 +104,7 @@ RSpec.describe PrettyText::Helpers do
           relative_url: category.url,
           text: "Some Awesome Category",
           description: "Really great stuff here",
+          colors: [category.color],
           icon: "folder",
           id: category.id,
           slug: "someawesomecategory",
@@ -123,6 +128,7 @@ RSpec.describe PrettyText::Helpers do
           relative_url: private_category.url,
           text: "Manager Hideout",
           description: nil,
+          colors: [private_category.color],
           icon: "folder",
           id: private_category.id,
           slug: "secretcategory",
diff --git a/spec/requests/hashtags_controller_spec.rb b/spec/requests/hashtags_controller_spec.rb
index 9b79c3e01af..e812237eb80 100644
--- a/spec/requests/hashtags_controller_spec.rb
+++ b/spec/requests/hashtags_controller_spec.rb
@@ -19,6 +19,133 @@ RSpec.describe HashtagsController do
     tag_group
   end
 
+  describe "#by_ids" do
+    context "when logged in" do
+      context "as anonymous user" do
+        it "does not return private categories" do
+          get "/hashtags/by-ids.json", params: { category: [category.id, private_category.id, -1] }
+
+          expect(response.status).to eq(200)
+          expect(response.parsed_body).to eq(
+            {
+              "category" => [
+                {
+                  "relative_url" => category.url,
+                  "text" => category.name,
+                  "description" => nil,
+                  "colors" => [category.color],
+                  "icon" => "folder",
+                  "type" => "category",
+                  "ref" => category.slug,
+                  "slug" => category.slug,
+                  "id" => category.id,
+                },
+              ],
+            },
+          )
+        end
+
+        it "does not return categories on login_required sites" do
+          SiteSetting.login_required = true
+
+          get "/hashtags/by-ids.json", params: { category: [category.id, private_category.id, -1] }
+
+          expect(response.status).to eq(403)
+        end
+      end
+
+      context "as regular user" do
+        before { sign_in(Fabricate(:user)) }
+
+        it "does not return private categories" do
+          get "/hashtags/by-ids.json", params: { category: [category.id, private_category.id, -1] }
+
+          expect(response.status).to eq(200)
+          expect(response.parsed_body).to eq(
+            {
+              "category" => [
+                {
+                  "relative_url" => category.url,
+                  "text" => category.name,
+                  "description" => nil,
+                  "colors" => [category.color],
+                  "icon" => "folder",
+                  "type" => "category",
+                  "ref" => category.slug,
+                  "slug" => category.slug,
+                  "id" => category.id,
+                },
+              ],
+            },
+          )
+        end
+      end
+
+      context "as admin" do
+        before { sign_in(Fabricate(:admin)) }
+
+        it "returns private categories" do
+          get "/hashtags/by-ids.json", params: { category: [category.id, private_category.id, -1] }
+
+          expect(response.status).to eq(200)
+          expect(response.parsed_body).to eq(
+            {
+              "category" => [
+                {
+                  "relative_url" => category.url,
+                  "text" => category.name,
+                  "description" => nil,
+                  "colors" => [category.color],
+                  "icon" => "folder",
+                  "type" => "category",
+                  "ref" => category.slug,
+                  "slug" => category.slug,
+                  "id" => category.id,
+                },
+                {
+                  "relative_url" => private_category.url,
+                  "text" => private_category.name,
+                  "description" => nil,
+                  "colors" => [private_category.color],
+                  "icon" => "folder",
+                  "type" => "category",
+                  "ref" => private_category.slug,
+                  "slug" => private_category.slug,
+                  "id" => private_category.id,
+                },
+              ],
+            },
+          )
+        end
+      end
+    end
+
+    context "when not logged in" do
+      it "does not return private categories" do
+        get "/hashtags/by-ids.json", params: { category: [category.id, private_category.id, -1] }
+
+        expect(response.status).to eq(200)
+        expect(response.parsed_body).to eq(
+          {
+            "category" => [
+              {
+                "relative_url" => category.url,
+                "text" => category.name,
+                "description" => nil,
+                "colors" => [category.color],
+                "icon" => "folder",
+                "type" => "category",
+                "ref" => category.slug,
+                "slug" => category.slug,
+                "id" => category.id,
+              },
+            ],
+          },
+        )
+      end
+    end
+  end
+
   describe "#lookup" do
     context "when logged in" do
       context "as regular user" do
@@ -39,6 +166,7 @@ RSpec.describe HashtagsController do
                   "relative_url" => category.url,
                   "text" => category.name,
                   "description" => nil,
+                  "colors" => [category.color],
                   "icon" => "folder",
                   "type" => "category",
                   "ref" => category.slug,
@@ -51,6 +179,7 @@ RSpec.describe HashtagsController do
                   "relative_url" => tag.url,
                   "text" => tag.name,
                   "description" => nil,
+                  "colors" => nil,
                   "icon" => "tag",
                   "type" => "tag",
                   "ref" => tag.name,
@@ -75,6 +204,7 @@ RSpec.describe HashtagsController do
                   "relative_url" => tag.url,
                   "text" => tag.name,
                   "description" => nil,
+                  "colors" => nil,
                   "icon" => "tag",
                   "type" => "tag",
                   "ref" => "#{tag.name}::tag",
@@ -121,6 +251,7 @@ RSpec.describe HashtagsController do
                   "relative_url" => private_category.url,
                   "text" => private_category.name,
                   "description" => nil,
+                  "colors" => [private_category.color],
                   "icon" => "folder",
                   "type" => "category",
                   "ref" => private_category.slug,
@@ -133,6 +264,7 @@ RSpec.describe HashtagsController do
                   "relative_url" => hidden_tag.url,
                   "text" => hidden_tag.name,
                   "description" => nil,
+                  "colors" => nil,
                   "icon" => "tag",
                   "type" => "tag",
                   "ref" => hidden_tag.name,
@@ -218,6 +350,7 @@ RSpec.describe HashtagsController do
               "text" => category.name,
               "description" => nil,
               "icon" => "folder",
+              "colors" => [category.color],
               "type" => "category",
               "ref" => category.slug,
               "slug" => category.slug,
@@ -227,6 +360,7 @@ RSpec.describe HashtagsController do
               "relative_url" => tag_2.url,
               "text" => tag_2.name,
               "description" => nil,
+              "colors" => nil,
               "icon" => "tag",
               "type" => "tag",
               "ref" => "#{tag_2.name}::tag",
@@ -261,6 +395,7 @@ RSpec.describe HashtagsController do
               "relative_url" => private_category.url,
               "text" => private_category.name,
               "description" => nil,
+              "colors" => [private_category.color],
               "icon" => "folder",
               "type" => "category",
               "ref" => private_category.slug,
@@ -278,6 +413,7 @@ RSpec.describe HashtagsController do
               "relative_url" => hidden_tag.url,
               "text" => hidden_tag.name,
               "description" => nil,
+              "colors" => nil,
               "icon" => "tag",
               "type" => "tag",
               "ref" => "#{hidden_tag.name}",
diff --git a/spec/services/category_hashtag_data_source_spec.rb b/spec/services/category_hashtag_data_source_spec.rb
index d13b30b51bf..b3e0fd29105 100644
--- a/spec/services/category_hashtag_data_source_spec.rb
+++ b/spec/services/category_hashtag_data_source_spec.rb
@@ -14,6 +14,20 @@ RSpec.describe CategoryHashtagDataSource do
   let(:guardian) { Guardian.new(user) }
   let(:uncategorized_category) { Category.find(SiteSetting.uncategorized_category_id) }
 
+  describe "#find_by_ids" do
+    it "finds categories by their IDs" do
+      expect(
+        described_class.find_by_ids(guardian, [parent_category.id, category1.id]).map(&:slug),
+      ).to contain_exactly("fun", "random")
+    end
+
+    it "does not find categories the user cannot access" do
+      expect(described_class.find_by_ids(guardian, [category4.id]).first).to eq(nil)
+      group.add(user)
+      expect(described_class.find_by_ids(Guardian.new(user), [category4.id]).first).not_to eq(nil)
+    end
+  end
+
   describe "#lookup" do
     it "finds categories using their slug, downcasing for matches" do
       result = described_class.lookup(guardian, ["movies"]).first
diff --git a/spec/services/hashtag_autocomplete_service_spec.rb b/spec/services/hashtag_autocomplete_service_spec.rb
index 1d3d9943de0..5d9906024fe 100644
--- a/spec/services/hashtag_autocomplete_service_spec.rb
+++ b/spec/services/hashtag_autocomplete_service_spec.rb
@@ -307,6 +307,14 @@ RSpec.describe HashtagAutocompleteService do
     end
   end
 
+  describe "#find_by_ids" do
+    it "can lookup and return only categories" do
+      results = service.find_by_ids({ "category" => [category1.id] })
+
+      expect(results["category"].map { |r| r[:slug] }).to eq(["the-book-club"])
+    end
+  end
+
   describe "#lookup" do
     fab!(:tag2) { Fabricate(:tag, name: "fiction-books") }
 
diff --git a/spec/system/hashtag_autocomplete_spec.rb b/spec/system/hashtag_autocomplete_spec.rb
index e4bcd7fe43b..61659ac0537 100644
--- a/spec/system/hashtag_autocomplete_spec.rb
+++ b/spec/system/hashtag_autocomplete_spec.rb
@@ -255,7 +255,10 @@ describe "Using #hashtag autocompletion to search for and lookup categories and
 
     it "shows a default color and css class for the category icon square" do
       topic_page.visit_topic(topic, post_number: post_with_private_category.post_number)
-      expect(page).to have_css(".hashtag-cooked .hashtag-missing")
+      expect(page).to have_css(".hashtag-cooked .hashtag-category-badge")
+      generated_css = find("#hashtag-css-generator", visible: false).text(:all)
+      expect(generated_css).to include(".hashtag-category-badge")
+      expect(generated_css).not_to include(".hashtag-color--category--#{private_category.id}")
     end
   end
 end